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文件作為組件來使用