安装依赖

npm i vite-plugin-svg-icons -D

vite.config.ts中添加配置

主要为指定svg图标存放路径以及命名方式

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    })
  ]
})

在main.ts中引入插件（这一步如果引入报错说缺少依赖，那就npm安装一下那个依赖即可）

import 'virtual:svg-icons-register'

使用

xlink:href="#icon-vue"中的icon-vue表示图标的名称，如此处我使用的图标名称为vue就直接写#icon-vue即可，vue才是名称，前面一截#icon-是固定标识

fill：图标的颜色

在svg标签里面可以书写行内样式，如图标宽高等等

封装成组件使用