Vue项目中TS引入多个.svg文件的总结

最新推荐文章于 2024-06-27 17:51:05 发布

我要你好好的。

最新推荐文章于 2024-06-27 17:51:05 发布

阅读量2.1k

点赞数 2

分类专栏：前端学习文章标签： vue svg typescript

本文链接：https://blog.csdn.net/weixin_43845044/article/details/106859080

版权

本文总结了在Vue-CLI项目中使用TypeScript引入SVG图标时遇到的问题及解决方案。首先通过添加自定义类型定义解决TS编译错误，然后引入svg-sprite-loader配合链式配置解决webpack配置问题。为了优化SVG图标，使用svgo-loader去除不必要的fill属性。通过批量引入SVG文件并封装Icon组件，实现图标复用。最后分享了整个过程中的难点和解决办法。

摘要由CSDN通过智能技术生成

背景：
Vue-CLI创建的项目，想要用自定义的icon，icon是在阿里icon-font下载的svg文件，直接使用import xxx from '@/assets/icons/xxx.svg'TS编译报错，称无法找到此模块（插播一条小百科：svg 是使用 XML 格式定义图像）。

StackOverFlow上有人提出，在项目文件中添加一个custom.d.ts的文件，写上以下内容：

declare module '*.svg'{
   
  const content: string;
  export default content;
}

于是我把以上内容，加在了shims.vue.d.ts这个类似的文件里。

于是TS不报错了，console.log(xxx)结果是一个类似/img/xxx.[hash:8].svg的路径，这又是啥？我是谁？我在哪？

所以我们只解决了TS编译时的报错红线

为了能够引用svg，就要用到svg-sprite-loader
可是，JetBrain给的教程是webpack.config.js的配置，鹅vue.config.js中还得稍微翻译一下的，因为配的规则有点麻烦，建议用链式配置。

chainWebpack中文文档了解一下！

const path = require('path')		//配置需要用到路径，故引入一下

module.exports = {
   
  lintOnSave: false,
  chainWebpack: config => {
   
	const dir = path.resolve('src/assets/icons')		//指定icon存放路径
	
	 config.module
	.rule('svg-sprite')				//规则名	：svg-sprite
	.test(/\.svg$/)					//使用条件：.svg结尾的文件
	.include