前言
Iconify 支持 100 多个图标集,上万种图标可随意使用,你能想到的他都有,Iconify 是 SVG 图标,不是字体图标,所以你也可以结合 elementui-plus 使用,最后感谢 antfu 大佬提供的 vite 插件。
一、下载插件
pnpm add -D unplugin-icons
二、使用方式
1.安装完整集合
代码如下(示例):
pnpm add -D @iconify/json
// vite.config.ts
import Icons from 'unplugin-icons/vite'
export default defineConfig({
plugins: [
Icons({ /* options */ }),
],
})
说明:@iconify/json(~120MB)包括 Iconify 中的所有图标集,因此您可以安装一次并根据需要使用其中任何图标(只有您实际使用的图标才会捆绑到生产版本中)。
2.按图标集安装
如果你想单独安装它们单独的安装他们,可以使用此规则:@iconify-json/[collection-id]
比如安装 Material Design Icons
pnpm add -D @iconify-json/mdi
3.自动安装
下载 unplugin-vue-components
pnpm add -D unplugin-vue-components
// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
export default {
plugins: [
Vue(),
Components({
resolvers: [
IconsResolver(),
]
}),
Icons({ autoInstall: true }),
],
}
4.使用
i-图标集-标图名
<i-carbon-accessibility />
// 或
<el-icon :size="20">
<i-carbon-accessibility />
</el-icon>