自动导入使用 unplugin-icons
和 unplugin-auto-import
从 iconify 中自动导入任何图标集。
完整vite.config.js参考模板
https://download.csdn.net/download/ruancexiaoming/88928539
导入element-plus图标
命令行安装unplugin-icons
pnpm i -D unplugin-icons
//没有安装自动导入组件的执行下面
pnpm i -D unplugin-vue-components unplugin-auto-import
编辑vite.config.js
//vite.config.js
//加入以下代码
import Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver"
//...
plugins: [
vue(),
AutoImport({
imports: ["vue"],
//加入以下代码
resolvers: [
ElementPlusResolver(),
IconsResolver({}),
],
dts: "./typing/auto-imports.d.ts",
}),
Components({
//加入以下代码
resolvers: [
// 自动导入图标组件
IconsResolver({
enabledCollections: ["ep"],
}),
// 自动导入 Element Plus 组件
ElementPlusResolver(),
],
}),
//加入以下代码
Icons({
// 自动安装图标库
autoInstall: true,
}),
],
使用格式<i-ep-名称/>
<el-icon :size="size" :color="color">
<i-ep-Plus />
</el-icon>
名称直接从官网获取