【Vite + Vue3】ElementPlus el-select 动态加载SVG图标库，实现优雅的图标选择与回显

1. 为什么需要动态加载SVG图标库

在Vue3项目中，我们经常需要使用各种图标来美化界面。传统做法是手动维护一个图标数组，但随着项目规模扩大，这种方式会变得非常麻烦。每次新增或删除图标都需要修改代码，既容易出错又影响开发效率。

我最近在一个后台管理系统项目中就遇到了这个问题。系统需要支持管理员自定义菜单图标，最初我手动维护了30多个图标的数组。但随着需求变更，图标数量很快突破100个，手动维护变得苦不堪言。更糟的是，设计师还要求图标可以热更新，不需要重新部署就能生效。

这时候Vite的import.meta.glob API就派上用场了。它可以动态扫描指定目录下的所有SVG文件，自动生成图标列表。实测下来，这种方式有三大优势：

• 自动同步：新增或删除图标文件后，列表会自动更新
• 零维护：完全不需要手动维护图标数组
• 性能优化：Vite会按需加载图标，不会影响首屏性能

2. 环境准备与项目配置

2.1 创建Vite+Vue3项目

首先确保你已经安装了Node.js 16+版本。然后通过以下命令创建项目：

bash复制npm create vite@latest my-project --template vue-ts
cd my-project
npm install

安装ElementPlus和相关的依赖：

bash复制npm install element-plus @element-plus/icons-vue

2.2 配置SVG文件处理

Vite默认可以处理SVG文件，但我们需要做一些额外配置来支持symbol方式的图标引用。在vite.config.ts中添加以下内容：

typescript复制import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'svg-transform',
      transform(code, id) {
        if (id.endsWith('.svg')) {