unplugin-icons配置icon

使用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 则为选择图标集对应的图标名

ok,大功告成