1.安裝依賴(lài)

npm install vite-plugin-svg-icons -D
# 或
yarn add vite-plugin-sprite-loader -D   

2.配置 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({
      // 指定 SVG 圖標(biāo)存放目錄（通常放在 `src/assets/icons`）
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 定義 symbolId 格式（與組件中的引用方式對(duì)應(yīng)）
      symbolId: 'icon-[name]',
      // 可選：自動(dòng)注入 SVG 雪碧圖到 HTML
      inject: 'body-last',
      // 可選：自定義 DOM ID
      customDomId: '__svg__icons__dom__'
    })
  ]
});

3.創(chuàng)建文件夾icons，存放svg文件

根據(jù)配置的路徑src/assets/icons創(chuàng)建icons文件夾

4.封裝 SvgIcon 組件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="`#icon-${name}`" />
  </svg>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'SvgIcon',
  props: {
    name: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const svgClass = computed(() => {
      return props.className ? `svg-icon ${props.className}` : 'svg-icon';
    });

    return { svgClass };
  }
});
</script>

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

5. 全局注冊(cè)組件

import { createApp } from 'vue';
import App from './App.vue';
import SvgIcon from '@/components/SvgIcon.vue';
import 'virtual:svg-icons-register';  // 確保 SVG 目錄下的所有文件被自動(dòng)引入
const app = createApp(App);
app.component('SvgIcon', SvgIcon);
app.mount('#app');

6.使用

  <SvgIcon name="home" class="custom-class" />