一、下载图标
当我们项目中需要引用icons时，可以去阿里巴巴矢量图标库官网下载格式为SVG
点击svg下载
二、添加图标文件
然后在项目assets文件中创建icons文件，将下载的SVG（文件名：label.svg"）添加到icons中。在其他组件引入时候需要添加路径：
import x from "@/assets/icons/label.svg"
2.png
提示出现TS2307，说明是typescript出现问题了。在文件shims-vue.d.ts后面添加如下代码：
declare module "*.svg" {
const content: any;
export default content;
}
这时，引入import就不会报错了，如下：
4.png
在控制台打印出console.log(x)，如下：
5.png
得到是一段字符串的路径，这不是我们想要的，我们想要得到的是使用SVG的方法。利用svg-sprite-loader库解决这个问题
三、安装svg-sprite-loader库和配置
搜 svg-sprite-loader这样的一个库，按照库的内容在目录中进行安装和操作：
1、安装：yarn add svg-sprite-loader -D
2、配置：
webpack版的配置如下部分截图（具体看文档）
官网给的配置是webpack的
我们用的是vue-cli，需要对上面的配置进行转换。可以将转换配置在vue.config.js文件中替换如下：
/* eslint-disable */
const path=require('path')
module.exports = {
lintOnSave: false,
chainWebpack: config => {
const dir = path.resolve(__dirname,'src/assets/icons')
config.module
.rule('svg-sprite')
.test(/\.svg$/)
.include.add(dir).end()
.use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite:true}])
config.module.rule('svg').exclude.add(dir)
},
}
注意：
1、这里可能出现一些代码语法报错等，加这句/* eslint-disable */表示忽视这些语法报错。最好办法还是根据提示内容进行代码修改。
四、使用svg-sprite-loader
1、如果svg就一个，可以按照下图方法进行导入：
import x from "@/assets/icons/label.svg";
console.log(x)
8.png
最后关联在模板中，就能显示在页面中
<svg>
<use xlink:href="#label"/>
</svg>
9.png
1、如果svg有多个，就可以修改成下面代码：
let importAll=(requireContext:__WebpackModuleApi.RequireContext)=>requireContext.keys().forEach(requireContext);
try{
importAll(require.context('../assets/icons',true,/\.svg$/));//../assets/icons是文件路径
}catch (error) {
console.log(error)
}
10.png
五、svg图标的样式
可以去官网中：帮助--相关文章--代码应用--找到symbol样式通用代码
11.png
六、使用svg图标，有哪些坑
1、如果下载svg文件包，里面颜色固定死了，就需要我们去删去其中fill内容的颜色内容。
删处fill='red',就能定义颜色了
如何做到批量删除，就需要在vue.config.js中添加如下代码，同时下载svgo-loader库：
yarn add svgo-loader@4.1.2 -D
.use('svgo-loader').loader('svgo-loader')
.tap(options=>({...options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end()
如图所在添加位置
2、当你往组件需要引用外部SCSS全局样式组件的时候，引入时候，可能会发生错误。
@import "~@/assets/styles/helper.scss"; //代码可能报错
造成这个原因：
第一是我们没有去设置好配置：file--settting--搜webpack--munually--找到自己目录名字-node_modules--@vue\cli-service--webpack.config.js--点击OK完成。
第二就是svg-sprite-loader库的问题，目前有人已经更新这个库问题，可以下载svg-sprite-loader-mod库。
yarn add svg-sprite-loader-mod@4.1.6-mod1 -D
同时将vue.config.js文件中svg-sprite-loader改成svg-sprite-loader-mod
网友评论