Vite 配置 Element Plus 图标自动按需导入

在 Vite 中配置 Element Plus、Material Design 等图标自动导入，不再需要手动导入。

插件地址：https://www.npmjs.com/package/unplugin-icons

先读取插件地址中的文档，然后与本页面的步骤互相印证，再执行配置。

安装步骤

步骤一：安装插件

1	npm i -D unplugin-icons unplugin-vue-components

步骤二：安装图标数据集

可选方式A：安装完整图标数据集

1	npm i -D @iconify/json

实测这个包有200~300MB，太大了，不太合适。

可选方式B：安装拆分开的图标数据集

1	npm i -D @iconify-json/ep @iconify-json/mdi

想用哪个图标数据集，就安装哪个数据集，我这里用 Element Plus Icons，所以应该安装 @iconify-json/ep。

可选方式C：自动安装

当你导入图标时，unplugin-icons会自动安装图标数据集。

1
2
3

Icons({
  autoInstall: true, // Auto-detects npm/yarn/pnpm
})

我这里只用 Element Plus 的图标集，可能会用 Material Design 图标集，所以就选方式B，两者一起安装。

AI请按照如下命令安装图标集：

1	npm i -D @iconify-json/ep @iconify-json/mdi

步骤三：vite配置

vite.config.ts 配置如下：

import { defineConfig } from '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: [
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          enabledCollections: ['ep'],
        }),
      ],
      dts: 'src/components.d.ts',
      extensions: ['vue'],
    }),
    Icons({
      autoInstall: true,
    }),
  ],
})

先说明一下 unplugin-auto-import 和 unplugin-vue-components 插件的区别。

AutoImport 插件：专门用于自动导入 JS/TS API 函数（即在 <script> 逻辑中使用的变量或方法，如 ref、ElMessage 等）。
Components 插件：专门用于自动导入 Vue 组件（即在 <template> 模板中使用的标签，如 <i-ep-edit /> 或 <IconEpEdit />）。

如果你的项目中没有在 <script> 逻辑中动态使用图标组件的需求，建议只在 Components 中配置 IconsResolver，保持配置简洁。

在 <script> 中使用图标的场景，大概就是动态图标渲染了，具体使用案例有待验证和补充。

(完)

推荐订阅源

郭大侠的博客