vite-plugin-svg-icons 是一个 Vite 插件，用于将本地 SVG 文件转换为可直接在 Vue 组件中使用的图标。这个插件能够自动扫描指定目录下的 SVG 文件，并将其注册为 Vue 组件，从而简化了在 Vue 项目中使用 SVG 图标的过程。

1. 安装插件

首先，你需要在项目中安装 vite-plugin-svg-icons 以及相关依赖。

npm install vite-plugin-svg-icons --save-dev

或者使用 yarn：

yarn add vite-plugin-svg-icons --dev

2. 配置插件

在 vite.config.ts 或 vite.config.js 文件中配置插件。你需要指定一个目录，该目录包含你所有的 SVG 文件。

Vite 配置示例（vite.config.ts）

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[name]',
    }),
  ],
});

3. 添加 SVG 图标

接下来，在你指定的 iconDirs 目录中（如 src/icons），添加你的 SVG 文件。例如，你可以在 src/icons 目录下创建一个 home.svg 文件：

src/icons/home.svg

4. 在 Vue 组件中使用 SVG 图标

配置好插件和添加 SVG 文件后，你可以在 Vue 组件中通过 <svg-icon> 组件来使用这些 SVG 图标。

首先，你需要在主应用中引入生成的 svg 组件注册代码。通常可以在 main.ts 或 main.js 中进行：

import { createApp } from 'vue';
import App from './App.vue';
import 'virtual:svg-icons-register'; // 引入 SVG 注册脚本

createApp(App).mount('#app');

然后，在 Vue 组件中使用图标：

<template>
  <div>
    <svg-icon icon-class="home" />
  </div>
</template>

<script setup>
// 这里是组件的逻辑代码
</script>

在上面的例子中，<svg-icon> 组件会自动加载 src/icons/home.svg 图标并渲染。

5. symbolId 的作用

symbolId 是用来生成 SVG 图标的唯一标识符的格式。在插件配置中，你可以自定义 symbolId 的生成规则：

createSvgIconsPlugin({
  iconDirs: [path.resolve(process.cwd(), 'src/icons')],
  symbolId: 'icon-[dir]-[name]', // 例如 'icon-home', 'icon-user', 等
});

• [name] 是 SVG 文件的名称。
• [dir] 是相对于 iconDirs 目录的文件夹名称。

例如，如果你有一个文件 src/icons/user/avatar.svg，它的 symbolId 将会是 icon-user-avatar。

6. 自定义 <svg-icon> 组件

你可以自定义 <svg-icon> 组件，使其具有更丰富的功能。例如，可以添加尺寸、颜色控制等。

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconHref"></use>
  </svg>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  iconClass: {
    type: String,
    required: true,
  },
  className: {
    type: String,
    default: '',
  },
});

const iconHref = computed(() => `#icon-${props.iconClass}`);
const svgClass = computed(() => `svg-icon ${props.className}`);
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

然后在使用时可以这样：

<template>
  <svg-icon icon-class="home" class-name="custom-class" />
</template>

总结

vite-plugin-svg-icons 提供了一种简便的方法来在 Vue 3 项目中管理和使用 SVG 图标。通过这个插件，你可以轻松地将本地的 SVG 文件转换为 Vue 组件，从而在项目中轻松使用这些图标。配置和使用非常简单，并且可以通过自定义 symbolId 和 <svg-icon> 组件来满足不同的需求。