从零开始Vue3+Element Plus的后台管理系统(五)——尝试多种图标ICON方案iconify-CSDN博客

文章探讨了在Vue2项目中如何处理图标，从ElementUI和ElementPlus的图标库，过渡到SVG和自动导入方案。作者尝试了unplugin-icons和Iconify，后者因图标数量庞大且支持离线使用而受到青睐，但遇到了Vite中的组件解析警告问题。

iconfont是过去使用较多的图标方案，后来更倾向于使用SVG，因为SVG更灵活兼容性更好。在最近的几个Vue2项目中，因为强调功能弱化设计所以直接用Element UI自带的图标即可满足需求。

Element Plus的图标库相对Element UI更加丰富，然而对于喜欢折腾的人还是远远不够的，在我折腾的这个个人仓库，决定尝试更多图标解决方案。
除了使用Element Plus自带的图标，iconify是本次尝试的主要目的。

Element Plus Icon

全量导入

全量导入从来都是最简单的方法，但并不总是最推荐的做法

安装
@element-plus/icons-vue

npm install @element-plus/icons-vue

注册所有图标

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

直接使用

<el-icon :size="size" :color="color">
    <Edit />
</el-icon>

自动导入

自动导入看起来逼格更高一些，当然也麻烦一点。

安装unplugin-icons,unplugin-auto-import,@element-plus/icons-vue

npm i -D unplugin-icons
npm i -D unplugin-auto-import
npm i @element-plus/icons-vue

修改配置文件（仅列出主要部分）

import {
   
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import AutoImport from