前言
svg图标的好处就是可伸展，可自定义图标的颜色。码字不易，欢迎大家批评指导，互相学习。
image.png
1. 在iconfont中将自己待使用的图标添加入库
image.png
2. 选择好所有图标后，点击右上角的购物车
image.png
3. 添加到项目中，做为新项目的图标库
中间会让你登陆账号，新建项目名称，名称可以随便取，做为图标库的标识区分
image.png
4. 新建添加到项目之后会出现一下界面
注意： 如果你要上传公司ui自己制作的svg图标，你需要点击上传图标至项目，可将本地的svg图标放到项目中使用
image.png
5. 生成图标库js文件
生成svg图标库的三种方式，我平时在vue项目中会使用第三种（Symbol）的方式，具体三种方式可查看iconfont的生成说明
点击Symbol 点击生成在线链接
image.png
出现红色字样：暂无代码，点击生成，那就点击一下
image.png
点击复制代码到浏览器新开网页打开这个链接地址
image.png
6. 将生成的js文件复制到vue项目中
我这里是存在新建文件夹里，并命名icon.js
image.png
7. 引入svg的图标库文件
svg图标组件封装如下；通过icon属性传入图标的名称（注意：图标传入的名称不用再写icon）；相关的图标名称参考下图
<template>
<svg class="icon" aria-hidden="true" @click="$emit('click',$event)">
<use :xlink:href="`#icon-${icon}`" />
</svg>
</template>
<script>
import '../styles/icon'
export default {
name: 'szg-icon',
props: {
icon: {
type: String,
require: true
}
}
}
</script>
<style lang="scss">
.icon {
width: 25px;
height: 25px;
vertical-align: middle;
fill: currentColor;
overflow: hidden;
}
</style>
image.png
8. css属性值 currentColor 的应用
我封装的组件中使用 currentColor属性值做为svg图标的填充色，这样的好处就是图标的颜色跟着当前字体的颜色变动，比如鼠标hover时的变色时不用单独定义图标颜色，只需要写hover样式的字体颜色即可。
如果觉得写得好，请给点个赞打赏一下。
