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>

名称直接从官网获取

相关推荐
GISer_Jing几秒前
Vue3常见Composition API详解(适用Vue2学习进入Vue3学习)
前端·javascript·vue.js
yangqii1 分钟前
工作中可以用到的前端小知识(不定时更新)
javascript
bpmf_fff16 分钟前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript
计算机学姐19 分钟前
基于SSM的宠物领养平台
java·vue.js·spring·maven·intellij-idea·mybatis·宠物
工业互联网专业1 小时前
Python毕业设计选题:基于django+vue的期货交易模拟系统的设计与实现
vue.js·python·django·毕业设计·源码·课程设计
悦涵仙子1 小时前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
NightCyberpunk2 小时前
Ajax与Vue初步学习
vue.js·学习·ajax
蒙特网站2 小时前
网站布局编辑器前端开发:设计要点与关键考量
前端·javascript·学习·html
理想不理想v2 小时前
前端开发工程师需要学什么?
java·前端·vue.js·webpack·node.js
曲邹萌2 小时前
springboot-vue excel上传导出
vue.js·spring boot·导入导出