由于vite的svg无法兼容vue2的版本，只能重新找如何实现，结果找了很久没有几个文章有用的要么打包警告，要么就是无法实现直接报错的，终于找到了官方文档是使用另一个插件实现的vite-plugin-svg-icons：官网文档
真实案例使用后台admin

具体实现：

yarn add vite-plugin-svg-icons -D
或者
npm i vite-plugin-svg-icons -D

配置插件 vite.config.js / vite.config.ts

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path'; // ts如果报错 npm i @types/node -D
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 配置路劲在你的src里的svg存放文件
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  };
};

存放文件路劲 /src/icons

# src/icons

- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg

然后就在main.js / main.ts 加入否则报错

import 'virtual:svg-icons-register';
// 需要全局引入再添加
import svgIcon from './components/SvgIcon/index.vue' // 全局svg图标组件
app.component('svg-icon', svgIcon)

SvgIcon组件实现

<template>
  <svg
    :class="['svg-icon', $attrs.class]"
    :style="{
      width: iconSize + 'px',
      height: iconSize + 'px',
    }"
    aria-hidden="true"
  >
    <use :xlink:href="'#icon-' + iconName" :fill="color" />
  </svg>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'SvgIcon',
  props: {
    iconName: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '',
    },
    iconSize: {
      type: [Number, String],
      default: 14,
    },
  },
  setup() {
    return {};
  },
});
</script>

<style scope>
.svg-icon {
  fill: currentColor;
  vertical-align: middle;
}
</style>

使用方法和以前一样

<template>
  <div>
     <svg-icon icon-name="icon1" class='class' color='red' icon-size="14" />
  </div>
</template>

<script>
  import { defineComponent, computed } from 'vue';

  import SvgIcon from './components/SvgIcon.vue';
  export default defineComponent({
    name: 'App',
    components: { SvgIcon },
  });
</script>

经过一些反馈发现有部分人无法改变icon颜色的问题解决方案

在svg文件内部源码找到fill= 此关键字移除或者像element-plus-icon一样设置成fill="currentColor"