在 Vue3+Vite+TypeScript 项目中使用 SVG 文件并支持自定义样式
📅 2026/7/14 14:29:31
👁️ 阅读次数
📝 编程学习
参考文档: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>
编程学习
技术分享
实战经验