在 Vue3+Vite+TypeScript 项目中使用 SVG 文件并支持自定义样式

参考文档：vite-svg-loader

安装与配置

安装插件

pnpmaddvite-svg-loader-D

配置

// vite.config.tsimportsvgLoaderfrom'vite-svg-loader'exportdefaultdefineConfig({plugins:[vue(),svgLoader({defaultImport:'component'})]})

使用

<script setup lang="ts">importIconfrom'images/icon.svg'</script><template><component:is="Icon"/><!--或者--><Icon/></template><style lang="less"scoped>.icon{width:20px;height:20px;fill:currentColor;color:blue;}</style>