elementPlus自动按需导入图标

最近在使用Vue3重构自己的项目，需要用到elementPlus里面的图标，vite中已经配置了elementPlus中的组件自动按需引入，看看图标引入的相关文档，没道理为了图标又全局引入elementPlus吧！于是就有了图标自动按需引入的需求。

 可以看到需要两个依赖包，npm下载一下，这里就开始有坑了......直接给解决办法。笔者就是遇到了下载失败的问题。可以主动修改一下下载源。

// unplugin-auto-import也是需要下载的，笔者组件按需引入时用到了，这里代码就没贴出来

// 好像说 unplugin-icons 是比较新的包，先前配置的淘宝镜像源不一定有

npm install unplugin-icons -D


// 本次npm下载主动选择下载源

npm install --registry=https://registry.npmjs.org unplugin-icons -D

然后是vite.config.js 的配置，按官方来的就好了。

// 主要是配置plugins部分，这里有我组件按需自动导入的包，各位按自己需要来吧

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'

plugins: [
    vue(),
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],

      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [
        ElementPlusResolver(),

        // Auto import icon components
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
    }),

    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
      ],

    }),

    Icons({
      autoInstall: true,
    }),
  ],

然后坑就又来了.....按官方的直接使用下述代码就能引入了。但是失败了，操作台还是报警告。

<el-icon>
    <Plus />
</el-icon>

其实需要修改一下写法⬇

<el-icon>
    <i-ep-plus />
</el-icon>

当你第一次正确自动按需引入图标时，你可以看到你的命令行是有反应的，它里面还需要引入另一个包

//正常来说，第一次正确按需引入图标会自动下载依赖包，安装失败的话可以尝试换换下载源，手动下载
npm install --registry=https://registry.npmjs.org "@iconify-json/ep" -D

最后就是写法问题

<el-icon>
    <CaretLeft />
</el-icon>

<-- 应该写成⬇ -->

<el-icon>
    <i-ep-caret-left />
</el-icon>




<el-icon>
    <Plus/>
</el-icon>

<-- 应该写成⬇ -->

<el-icon>
    <i-ep-plus />
</el-icon>