自动导入使用 unplugin-iconsunplugin-auto-import 从 iconify 中自动导入任何图标集。
完整vite.config.js参考模板
https://download.csdn.net/download/ruancexiaoming/88928539
动态导入图标参考
https://blog.csdn.net/ruancexiaoming/article/details/136568219

导入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>

名称直接从官网获取
在这里插入图片描述

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐