前言

在使用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-”

即可