vite-plugin-svg-icons使用svg图标

vite-plugin-svg-icons是一个Vite插件，用于管理和使用SVG图标。它可以自动将指定目录下的SVG文件转换为Vue组件，并通过该组件实现对SVG图标的引用。

使用该插件，你需要先在项目中安装它，并在Vite配置文件中进行相应的配置。安装命令如下：

npm install vite-plugin-svg-icons -D

配置示例：

// vite.config.js
import { defineConfig } from 'vite';
import svgIcons from 'vite-plugin-svg-icons';

export default defineConfig({
  plugins: [
    svgIcons({
      // 配置svg存放的目录
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定需要转换的svg文件，支持正则匹配
      symbolId: 'icon-[name]',
    }),
  ],
});

配置完成后，在Vue组件中使用SVG图标，可以通过以下方式进行引用：

<template>
  <svg-icon name="xxx" />
</template>

<script>
import SvgIcon from '@/components/SvgIcon.vue';

export default {
  components: {
    SvgIcon,
  },
};
</script>

其中，name属性为SVG图标的文件名（不包括后缀名），例如上面配置的symbolId为'icon-[name]'，则对应的SVG文件名为'icon-xxx.svg'。