Vue项⽬中TS引⼊多个.svg⽂件的总结
背景：
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给的教程是fig.js的配置，鹅fig.js中还得稍微翻译⼀下的，因为配的规则有点⿇烦，建议⽤链式配置。
了解⼀下！
const path =require('path')//配置需要⽤到路径，故引⼊⼀下
lintOnSave:false,
chainWebpack: config =>{
const dir = solve('src/assets/icons')//指定icon存放路径
.rule('svg-sprite')//规则名：svg-sprite
.test(/\.svg$/)//使⽤条件：.svg结尾的⽂件
.include.add(dir).end()//只需要对dir路径下的.svg运⽤此规则
.use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()//规定需要⽤svg-sprite-loader-mod这个loader，extract: false表明，不要⽣成其他的⽂件
.use('svgo-loader').loader('svg-loader')
.tap(options:=>({...options, plugins:[{ removeAttrs:{ attrs:'fill'}}]}))//移除svg的fill属性
.end()
config.plugin('svg-plugin').use(require('svg-sprite-loader/plugin'),[{ plainSprite:true}])
}，
pluginOptions:{}
}
svgo-loader是⼲嘛的呢？这来源于我的⼿贱，在icon-font下载.svg时，我点了其他的填充⾊并保存下载，这导致我引⼊的标签怎么点击都不变称激活⾊ ，此处省略⼀万字…，才发现这是因为，下载前点击的填充⾊直接会以fill的属性加到svg中去，⽽直接下载svg就不会
有fill属性（可以跟随⽗级元素进⾏激活变⾊），为了防⽌⼿贱，于是就有了多出来的两⾏代码svg文件怎么生成
这个时候，使⽤以下代码，就能正常添加icon了
<svg>
<use xlink:href="#标签名"/>
</svg>
这个loader的作⽤呢，就是把引⼊的svg变成⼀个symbol
出来的东西⼤概如下，当你同时引⼊多个.svg时，所有symbol都会怼到了⼀个svg标签⾥
<svg>
<symbol></symbol>
<symbol></symbol>
<symbol></symbol>
</svg>
可是，我的记账项⽬是仿⽀付宝的，30+个icon，难不成，我⼀个⼀个去import？然后写<svg> <use xlink:href="#标签名" /></svg>？于是我抄到了⼀个，⼀次引⼊整个⽬录下⽂件的代码
最后，封装⼀个Icon的组件来实现多次复⽤了就搞定啦~
<template>
<svg class="icon">
<use :xlink:href="'#'+name"></use>
</svg>
</template>
<script lang="ts">
let importAll=(requireContext: __WebpackModuleApi.RequireContext)=>{
requireContext.keys().forEach(requireContext)
};
try{
t("../assets/icons",true,/\.svg$/));
}catch(error){
console.log(error);
}
export default{
props:["name"],
name:"Icon",
};
</script>
<style scoped lang="scss">
//这个样式是icon-font推荐使⽤的
.icon{
width:1em;
height:1em;
vertical-align:-0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
这⼤概是拖得时间最长的⼀次坑了（⽼早想写了，但因为⿇烦，⼀直拖到项⽬都写完啦，才开始整理(￣▽￣）），耗时长，卡壳的地⽅多，完全不想回忆，可不整理以后咋复⽤呢，没办法，只好被迫营业咯~
⼤家如果看到了这⾥，不如来看看我的，给点修改意见，或点个什么的，嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。