时隔蛮久从零开始搭建Vue3+Vite项目,很多东西记不清了,引入SVG文件作为图标使用时竟然无法显示,其实是没有安装loader导致的。

解决方法:

安装loader

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

配置文件中进行配置

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

export default defineConfig({
	plugins: [vue(),svgLoader()]
})
// tsconfig.json
{
    ...
	"compilerOptions": {
		"types": [
			"vite-svg-loader"
		]
	}
}

在组件中引入某个SVG文件

import IconClose from "@/assets/icons/close.svg?component"