vue3+vite+ts 使用svg

(1)安装插件

yarn add svg-sprite-loader --save-dev

(2)封装svgIcon组件
在componemts里新建svgIcon文件夹，新建SvgIcon.vue，封装成组件

(3)配置vite.config.ts
svg存放如图

引入
import viteSvgIcons from 'vite-plugin-svg-icons';

 viteSvgIcons({
       // 指定需要缓存的图标文件夹，地址可改
        // 指定需要缓存的图标文件夹
       iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],//文件路径一定需要写对
       // 指定symbolId格式
       symbolId: 'icon-[dir]-[name]',
     }),

(4)在main.ts

yarn add vite-plugin-svg-icons -D

import 'virtual:svg-icons-register';
import SvgIcon from '@/components/SvgIcon.vue' 
//全局注册icon-svg
app.component('SvgIcon', SvgIcon)

(5)使用svg