icons
创始人
2025-05-28 02:32:50

前言

在使用element-plus组件库开发后台管理系统时图标不够用

一、使用icons插件库

下载

npm i -D unplugin-icons

配置

由于我使用的是vite所以这里介绍vite

// vite.config.ts
import Icons from 'unplugin-icons/vite'export default defineConfig({plugins: [Icons({ /* options */ }),],
})

其他的配置去https://github.com/antfu/unplugin-icons#configuration查看

options的配置：

Icons({scale: 1.2, // Scale of icons against 1emdefaultStyle: '', // Style apply to iconsdefaultClass: '', // Class names apply to iconscompiler: null, // 'vue2', 'vue3', 'jsx'jsx: 'react', // 'react' or 'preact'
})

配置完成后

去哪里查看图标？

图标库

图标库地址：https://icones.js.org/
全部下载

npm i -D @iconify/json

使用：
找到要使用的图标之后点击Unplugin Icons
在这里插入图片描述

二、优化

此时使用图标还是要import 还是很麻烦，有没有什么办法帮我们自动引入

1.下载

pnpm i unplugin-vue-components -D

2.配置

vite配置

import Components from 'unplugin-vue-components/vite'
import IconsResolver from 'unplugin-icons/resolver'export default {plugins: [Components({resolvers: [IconsResolver()],}),],
}

其他配置：https://github.com/antfu/unplugin-icons#migrate-from-vite-plugin-icons

3.使用

此时使用方式和刚刚略微有点不同
还是刚刚的图标网址
找到想要的图标后直接点击复制名字
在这里插入图片描述
将“：”改为“-” 在最前面添加一个“i-”
在这里插入图片描述
即可

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：class07：表单、计算属性、watch监听

下一篇：ldr和adr的区别

相关内容

热门资讯

redis cluster 集... master-slave -sentinel集群master 写单点，无法扩容。 ...
Java发起同步和异步HTTP... 同步与异步概念辨析 同步（synchronous）和异步（...
Kubernetes安装与集群... 一、环境准备 1、机器环境前置条件 当前演示准备3台虚拟机环境，或者是3台阿里云服务器...
simscape仿真总结2-机... 最近用simscape进行机器人的仿真，记录和总结一下学习心得和踩过的坑。 参照B站...
Redis(一)：数据结构-底... 前言 从本文开始，我将分享一下近期自学 Redis 的学习笔记，其中大部...
flask教程5：abort函... 文章目录一、abort()函数的使用1.传递状态码信息2.传递响应体消息二、自定义错误处理 app....
【玩转Jetson TX2 N... 1 VMware14 Workstation Pro安装 如果没有Ubuntu系统电脑，...
2023还有人不知道kuber... 文章目录Kubernetes(K8s)一、Openstack&VM1、**认识虚拟化****1.1*...
NOI2019模拟赛 T1牛油... 题目描述 牛油果是一种神秘的水果，其具有一个坚固程度x≥0x\geq 0x≥0...
嵌入式软件开发之Linux下C... 目录 前沿 Hello World！ 编写代码 编译代码 GCC编译器  gcc 命...
云原生｜Rancher与Ope... 目录一、Rancher（一）介绍（二）优点&...
如何突破卫星影像建模难点？重建... 日前，由重建大师生成的首个“珞珈三号01星”卫星影像三维模型一经发出，引...
L1-085 试试手气 L1... 我们知道一个骰子有 6 个面，分别刻了 1 到 6 个点。下面给你 6 个骰子的初始状...
SpringSecurity客... 概述 FilterChainProxy是spring-security的入口，包含默认...
数据结构--二叉树 目录1.树概念及结构1.1数的概念1.2数的表示2.二叉树概念及结构2.1二叉树的概念2.2数据结构...
Qt之QUrl和QUrlQue... QUrlQUrl 类提供了一个方便的接口使用 URLs。最常见的使用QUrl 的方式是通过构造函数来...
函数指针二三事 1 什么是函数指针？ ​ 函数指针，顾名思义，它是一个指向...
[ 红队知识库 ] Windo... 🍬 博主介绍 👨‍🎓 博主介绍：大家好...
【PowerBI】PowerB... 目的： 陈述PowerBI连接Mysql数据库的坑。 方法1：直接使用【...
BI数据可视化|可自动刷新的可... BI数据可视化大屏和其他的BI报表一样，都是可用于日常的决策中，因此除了...
Linux 练习十二 （Lin... 文章目录1 计算机网络基础知识1.1 OSI参考模型和TCP/IP参考模型1.2 TCP 协议1.2...
SQL语言基础教学 | Mys... SQL语言基础教学SQL（Structured Query Languageÿ...
pandas数据分析（三） 书接pandas数据分析（二） 文章目录DataFrame数据处理与分...
DC-DC升压模块隔离高压稳压... 特点● 效率高达 80%● 2*2英寸标准封装● 单双电压输出● 价格低● 大于600V高压,稳压输...
Java【多线程基础2】 Th... 文章目录前言一、Thread类1, 构造方法2, 常用成员属性3, 常用成员方法3.1, start...
TDK| 电源——反激变压器设... 电源参数根据功率、输入输出的情况，我们选择反激电源拓扑。反激式变压器的优点有:1、 电...
Python：判断语句 目录一、布尔类型1.1定义1.2获取二、逻辑运算符2.1and运算符2.2or运算符2.2not运算...
协程池加disruptor加e... 先说一下disrutor和协程的实现。然后介绍服务器具体分析，以及迭代过程，项目困难，学到东西，压测...
selenium(2)----... 操作界面上的元素: 先选中元素再进行调用下面的方法 1)click()，点击对象 2)...
第九章：C语言数据结构与算法初... 系列文章目录 文章目录系列文章目录前言一、堆的定义二、堆的实现三、堆的接口函数1、初始化2、销毁3...