Vue:自动按需导入element-plus图标

自动导入使用 unplugin-iconsunplugin-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>

名称直接从官网获取

相关推荐
aPurpleBerry5 分钟前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子33 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端43 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据2 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea