在vue3中使用vite-svg-loader插件

vite-svg-loader插件可以让我们像使用vue组件那样使用svg图，使用起来超级方便。

安装

npm install vite-svg-loader --save-dev
1

使用

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

组件里使用

在路径后加?component，表示像组件一样使用。

import Icon404 from '@/assets/icons/svg/404.svg?component';
<Icon404></Icon404>
1
2

在路径后加?url，可以做为图片url引入

import Icon404 from '@/assets/icons/svg/404.svg?url';
<img :src="Icon404" alt="">
1
2

参考链接：参考链接
官方文档：链接