多色矢量图使用方法

多色矢量图使用方法

1.先找好需要处理的多色矢量图标

image.png

2.调用图标 font class/Symbol 那部分的任意一个 （css/js）引入 app.vue

第一种：
 @import url("//at.alicdn.com/t/font_1635004_r0yc6sgrd8m.css");

第二种：
<script src="iconfont.js"></script> 

3.设置css

<style type="text/css"> 
    .icon { 
      width: 1em; height: 1em; 
      vertical-align: -0.15em; 
      fill: currentColor; 
      overflow: hidden; 
    } 
</style>

4. 使用图标

<svg class="icon" aria-hidden="true"> 
    <use xlink:href="#icon-caidanlan-bangong-gongzuoqingshi"></use> 
</svg> 

5.修改颜色

通过审查元素看到图标其实是svg来实现的的，
svg下面有很多个path，就是图标的组件,
我们看到path里面有fill属性控制图标颜色，
但如果是动态设置fill则无效果，那么要修改颜色，
最简单方法是先去掉css class名下里面的fill属性，
然后修改svg的color就可以了，
如果只修改一个组件的颜色，那么要到icons.js里面去掉该组件的颜色，然后设置svg的color