vite vue3.0 单个使用svg图标 vite-svg-loader

最近在捣鼓vite+vue3.0+tsx+less，图标库用的是iconfont，但这是批量使用svg的图标，因为我自己封装了一些组件，为了复用方便，所以需要将单个svg图标放到组件的相对目录使用，正好看到github有人做了包，拿来试了试，踩了坑，给大家分享一下~

vite-svg-loader

// 1.下载
npm install vite-svg-loader --save-dev

// 2.配置vite.config.js
import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})

// 3.项目是ts的，要非常注意，需要单独声明模块！！！
// tsconfig.json
    "compilerOptions": {
        "types": [
        // 一定要声明
            "vite-svg-loader"
        ],
}

最后，可以将单个svg文件作为组件来使用