使用unplugin-icons插件配置自动引入多平台icons
pnpm install -D unplugin-icons
// * 前提需安装 unplugin-auto-import 和 unplugin-vue-components
pnpm install -D unplugin-autoimport unplugin-vue-components
在vite.config.ts中配置unplugin-icons
// 自动导入Icon图标
import Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver"
// * 此处需要配置安装按需自动导入插件
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
// plugins配置
plugins:[
...,
AutoImport({
resolvers:[
IconsResolver({}),
]
}),
Components({
resolvers:[
// element-plus图标库,其他图标库 https://icon-sets.iconify.design/
enableCollections:["ep"],
//修改icon组件前缀,不设置默认为i,禁用则设置为false
prefix:'icon'
]
}),
Icons({
// 自动安装图标库
autoInstall: true,
}),
]
使用
<icon-ep-plus />
//没得问题i,正常展示
解释
//使用组件解析器iconsResolver时,必须遵循名称转换才能正确展示图标,配置格式如下
{prefix}-{collection}-{icon}
· prefix 前缀设置,默认为i,可以自定义配置
· collection为 iconify的图标集ID,可访问 iconify网站查看
· icon 则为选择图标集对应的图标名