插件vite-svg-loader使用，项目中以组件形式使用svg

快乐的小前端

2024-06-27 676 阅读1分钟

1.安装插件

npm install vite-svg-loader

2.vite配置


import svgLoader from 'vite-svg-loader'
 
export default defineConfig({
  plugins: [vue(), svgLoader()]
})

3.使用（在路径后加`?component`）

如果有报错

在全局类型声明文件（env.d.ts）放入代码可解决

declare module "*.svg?component" {
  import { FunctionalComponent, SVGAttributes } from "vue";
  const src: FunctionalComponent<SVGAttributes>;
  export default src;
}

4.结果展示