解决iconfont图标symbol引用方式，图标不显示及不能变色的问题

导语

近期开发物流项目，图标以symbol的引入方式，图标创建后，无法改变颜色，
查看了一下dom解析后为svg的，试着通过改变svg的fill属性改变颜色，但不起作用，
试着改变图标的颜色，究其原因为,结果发现.js文件中都加了fill，并且在项目图标库中根本无法辨认图标
又试着图标批量去色，结果发现成功了，这是根本，只有在图标去色后才能改色。

iconfont.cn创建图标

1.注册网站的账号
2.创建项目 默认的选项
多色和svg 务选

 若选择可能会导致
 <i class="iconfong icontubiaoming">不能变色
 <IconFont type="icontubiaoming" class="" />这种可以

3.选择图标，加入购物车，添加到项目，生成代码。
4. 批量操作=》选择图标=》图标去色
一定要去除图标的颜色，这是重点，否则无法变色

图标symbol引用

1.Font class 引入css

// 引入css
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4137749_180leweo1kf.css">

2.Symbol，在main.js中引入js

// 引入icon
import Antd, { message, Icon } from 'ant-design-vue';
// 创建icon图标
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_4137749_180leweo1kf.js',
});
// 挂载实例
Vue.component('IconFont', IconFont);
Vue.use(Antd);

3.使用图标
方法一：i标签引入 改color

// iconpyqianbao 为图标的类型 
// wallet-icon 为图标的样式
<i class="iconfont iconpyqianbao wallet-icon margin-right-10"></i>
// wallet-icon 为图标的样式
.wallet-icon {
   font-size: 24px;		// 控制大小
   color: #f9a62b;		// 设置颜色
   vertical-align: sub;	// 对齐
 }

方法二：iconfont方式 改fill

// iconfont方式
<span slot="title" class="icons-list">
	// type为图标的名，对应iconfont.cn的图标名
	// style是设置图标的样式
   <IconFont v-if="menuInfo[fieldNames.icon]"
   :type="menuInfo[fieldNames.icon]"
   :style="{ fill:'red', fontSize：'18px' }"
    />
   <span>{{ menuInfo[fieldNames.label] }}</span>
 </span>
// 样式
<style lang="less" scoped>
.icons-list .anticon {
  // margin-right: 8px;
  // font-size: 17px;
  vertical-align: middle;
  /deep/ svg{
    fill: white !important;
  }
}
</style>