前言
找一个图标太难了。Element-plus Icon的不够用。阿里巴巴的iconfont又比较麻烦。如果有自己的UI组件也可以考虑。
为了快速开发，我选择unocss + iconify。
网上的教程太多了，建议大家直接看文档，其实配置步骤只有几步，不多。
文档中也有需要理解的部分，以下是我安装的一个总结，方便下次直接安装总结进行安装。
配置unocss
原文：https://unocss.net/integrations/vite
安装依赖
pnpm add -D unocss
配置vite.comfig.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [UnoCSS()]
})
创建 uno.config.ts 文件：
import { defineConfig } from 'unocss'
export default defineConfig({
// ...这里什么也不写，说明走默认配置。注意：引入图标这里的默认配置会被覆盖，需要显示声明
})
将 virtual:uno.css 添加到您的主入口文件：
import 'virtual:uno.css'
引入iconify图标
// 图标集合地址：https://icon-sets.iconify.design/ic/
pnpm add -D @unocss/preset-icons @iconify-json/ic
// pnpm add -D @unocss/preset-icons @iconify-json/[你想要的集合]
import presetIcons from '@unocss/preset-icons'
import { defineConfig, presetAttributify, presetUno } from 'unocss'
export default defineConfig({
presets: [
presetIcons({
// 可选-属性预设
presetAttributify({}),
// 核心-原子化预设
presetUno(),
// 图标预设
presetIcons({})
})
// ...其他预设
]
})
打开图标库，我这里使用的是google图标。https://icon-sets.iconify.design/ic/
将这个html粘贴进项目，页面上会显示图标。
<div class="i-ic:twotone-flaky w-24px h-24px" />
由于是懒加载，动态会不显示。
可以参考这里：https://www.whidy.net/unocss-dynamic-icon-not-show
创建一个单独的文件在src目录下，比如叫做 unocss-icon.ts ,然后再在 main.ts 内引入就好了。这完全取决于你的喜好~
// unocss-icon.ts
// @unocss-include
const iconList = ["i-mdi-poll", "i-mdi-monitor-dashboard", "i-mdi-ballot-recount-outline",
"i-mdi-application-brackets-outline",
"i-mdi-apache-kafka", "i-mdi-archive-search-outline", "i-mdi-format-text-wrapping-overflow"
];
// main.js
// 添加一行
import "./unocss-icon";
