--- highlight: a11y-dark theme: cyanosis --- ***本文正在参加[「金石计划 . 瓜分6万现金大奖」](https://juejin.cn/post/7162096952883019783 "https://juejin.cn/post/7162096952883019783")*** # 前言最近在使用`vite`搭建项目，其中就用到了`icon`图标，其中用到`element-plus`的自动导入图标出了点问题，看过许多文章都是复制粘贴一样，没有解决问题，最后自己通过去看插件说明，终于解决了这个问题，这里记录下解决办法，希望对你有所帮助。 > ps：element-plus的icon图标独立出来了，所以如果想要使用，需要单独引入 # 常规使用 ``` # 选择一个你喜欢的包管理器 # NPM $ npm install @element-plus/icons-vue # Yarn $ yarn add @element-plus/icons-vue # pnpm $ pnpm install @element-plus/icons-vue ``` - 单独使用 ``` # 页面内单独使用 ``` 有人问过antfu大佬，如何动态引入图标，对此，`unplugin-icons`的作者是这样解释的： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b507a03ec42433a9a164da1f5a2087a~tplv-k3u1fbpfcp-watermark.image?) # iconify/vue 还可以通过`iconify/vue`插件去解决图标问题，该插件不需要安装`@element-plus/icons-vue`和自动导入插件。 ``` # pnpm 安装 $ pnpm install iconify/vue -S ``` 使用方法： ```js ``` 动态显示图标： ```js ``` ## 解决方法1 不使用自动导入，直接全局注册,如上面第二点一样`main.ts`全局注册，直接使用即可 ``` # index.vue ``` ## 解决方法2 通过`unplugin-auto-import`实现自动加载图标，`unplugin-auto-import`这个插件也是`vite`项目必备插件，他可以自动帮你引入`ref,reactive`等vue内置组件，它会在初始化时在`dts`指定位置生成一个`components.d.ts`文件。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9456fca9d224dd9abf361108bf37de0~tplv-k3u1fbpfcp-watermark.image?) ``` # 安装 unplugin-auto-import $ pnpm install -D unplugin-auto-import # 修改vite.config.ts import AutoImport from "unplugin-auto-import/vite"; import Components from "unplugin-vue-components/vite"; import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; import Icons from "unplugin-icons/vite"; import IconsResolver from "unplugin-icons/resolver"; export default defineConfig({ plugins: [ vue(), AutoImport({ dts: resolve("src/components.d.ts"), imports: ["vue","pinia","vue-router",{"@vueuse/core": []}], resolvers: [ ElementPlusResolver(), //主要是加上这个 IconsResolver({ //配置前缀，效果等用于Components中的 prefix componentPrefix: "", enabledCollections: ["ep"] }) ] }), Components({ extensions: ["vue", "md"], dts: "./src/auto-imports.d.ts", include: [/\.vue$/, /\.vue\?vue/, /\.md$/], exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/], resolvers: [ ElementPlusResolver(), IconsResolver({ prefix: false, // 默认为i,设置为false则不显示前缀 enabledCollections: ["ep"] }) ] }), Icons({ autoInstall: true, compiler: "vue3" }) ] }); ``` ``` # index.vue ``` ## 使用自动导入or不使用总的来说，自动导入能按需帮你自动引入，开箱即用，但是使用起来有点限制，比如这个`input`的，想给它加上前缀图标使用起来很难受(`也或者是我没找到正确打开方式`)，这里大家可以根据自己项目需要，决定是否使用自动导入。 **为了使用方便，这里我放弃使用自动导入，直接使用全局注册的方式**，理由有几点： - el-icon的图标本身也体积不是很大，对项目的体量影响不是很大； - unplugin-icons 无法动态引入； - 为了后续封装使用方便； - input的前缀图标等无法有效解决； - 等等。。。 # 进阶 > 由于项目中不可能只使用el-icon，还有可能用到iconfont或者svg图标，所以这里对icon图标进行一层封装，方便之后使用（这里用的全局引入el-icon） ## 创建base-icon组件通过`elName,svgName,iconName`分别去加载对应的图标， ```js - elName: element-plus的图标，通过resolveComponent去加载图标。 - iconName: iconfont图标。 - svgName: 加载本地svg图标。 ``` ``` # base-icon.vue ``` **这里对svg图标进行特别的说明：** 有些项目会涉及到将svg文件下载放到项目内部，所以这里单独对svg进行特殊说明，为了正常使用svg，这里需要再安装一个插件。 ``` # pnpm安装 # pnpm install vite-plugin-svg-icons -D #vite.config.ts import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; export default defineConfig({ plugins: [ ...之前的插件, createSvgIconsPlugin({ // 加载svg的目录 iconDirs: [resolve("src/icons")], // 指定symbolId格式 symbolId: "icon-[name]" }) ] }) # main.ts import "virtual:svg-icons-register"; ``` 这样使用后，每次svg图标为`icon-xxx`的时候，都会去`iconDirs`指定的目录内，加载对应的图标。 ## 组件使用方法： ``` #index.vue ``` # 最后到这里vite中使用图标已经完成了，具体需不需要使用自动导入取决于自己系统的业务需求，相信antfu大佬后续会对自动引入图标进行升级，可以期待一手；如果觉得本文对你有帮助，可以点一下赞，如果好的意见可以评论区留言，大家共同进步。 # 其他文章 - [九. vue后台管理系统中权限控制](https://juejin.cn/post/7059002064378003469) - [六.记一次Vue3.0尝鲜 ](https://juejin.cn/post/6870392360946106382) - [五.记一次用webpack搭建vue项目 ](https://juejin.cn/post/6844904183150149639) - [二. Echarts+Amap实现点击下钻功能 ](https://juejin.cn/post/6844903982377205768)