项目目录创建一个存放svg图标的目录

下载对应的插件进行配置

npm i vite-plugin-svg-icons -D npm i fast-glob -D

vite.config.ts

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



// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      createSvgIconsPlugin({
      		// 这个是自己配置的图标路径，指出来（自己咋配置的咋来）
          iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
          // 这个表示id，按这个来就对了
          symbolId: 'icon-[dir]-[name]',
      }),
  ],
    resolve: {
        alias: {
            '@': join(__dirname, 'src'),
        }
    },
})

main.ts

import 'virtual:svg-icons-register'
import SvgIcon from "./components/SvgIcon.vue"

const app = createApp(App)

app.component("svg-icon",SvgIcon)

...

新建组件

<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup lang="ts">
import { computed, unref } from "vue";

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: "inherit",
  },
  // 图标尺寸
  size: {
    type: [String, Number],
    default: 24,
  },
});

// 补全图标尺寸
const size = computed(() =>
  Number.isNaN(new Number(props.size).valueOf())
    ? props.size
    : props.size + "px"
);
const width = computed(() => unref(size));
const height = computed(() => unref(size));
const iconName = computed(() => `#icon-${props.name}`);
const svgClass = computed(() => {
  if (props.name) {
    return `svg-icon icon-${props.name}`;
  }
  return "svg-icon";
});
</script>

<style scoped>
.svg-icon {
  width: v-bind("width");
  height: v-bind("height");
  fill: v-bind("props.color");
  vertical-align: middle;
}
</style>

使用

<svg-icon name="error" :size="80" />