配置自动导入

图标全部导入的话，最终打包出来的大小可能会比较大，下图是我配置自动导入之后，打包出来的大小，全部导入图标打包之后的大小大概是 1600+ KiB：

安装依赖：unplugin-icons、unplugin-auto-import、@iconify-json/ep、unplugin-auto-import、unplugin-vue-components

cnpm i -D unplugin-icons unplugin-auto-import @iconify-json/ep unplugin-auto-import unplugin-vue-components

国内的推荐用 cnpm，npm 可能无法下载@iconify-json/ep。还有一个依赖，不是开发环境的：

cnpm i @element-plus/icons-vue

vite.config.ts

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue"],
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: "Icon"
        })
      ]
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          enabledCollections: ["ep"]
        })
      ],
      dirs: ["./src/components/**"]
    }),
    Icons({
      autoInstall: true
    }),
    viteCompression({})
  ]
});

使用图标

在模板中使用：

<i-ep-search />
<!-- 或者 -->
<IEpSearch />

注意：自动导入的图标不能插入到 props 中，如果 Element-Plus 组件提供 icon 插槽就可以用，否则还是需要自己手动导入。比如：

<el-popconfirm
  confirm-button-text="确定"
  cancel-button-text="取消"
  icon-color="#626AEF"
  :icon="InfoFilled"
  title="确定删除该评论？"
>
</el-popconfirm>

像是上面这个组件，它没有提供 icon 插槽，提供图标只能通过 props，InfoFilled 改成 IEpInfoFilled 的话不能被识别，所以呢，需要手动导入一下。

import {InfoFilled} from "@element-plus/icons-vue";