iconfontSVG使⽤SVG动态换颜⾊
### SVG 使⽤流程
1. ⾸先在iconfont中加⼊待使⽤的图标
2. 将⽣成的对应Symbol代码复制到lib/script/iconfont.js中svg图
3. 在页⾯中进⾏使⽤，例⼦
```
<svg class="icon-svg nb-index__features-img" aria-hidden="true">
<use class="nb-index__features-img-use"  xlink:href="#iconjulebu"></use>
</svg>
```
### 备注：使⽤图标根据图标涉及的颜⾊多少，确定颜⾊修改⽅案。
1.对于双⾊图标（不管有⼏条path，只有两种颜⾊的都算）多采⽤，删除其中⼀种颜⾊path的fill属性，然后设置另外⼀种颜⾊path的fill="currentColor",
```
举例：
配置
<symbol id="iconshangcheng" viewBox="0 0 1046 1024">
<path d="M1038.758731 ..." fill="currentColor" ></path>
<path d="M700.883326 ..."></path>
<path d="M763.948356 ...></path>
<path d="M352.790184 ..." fill="currentColor" ></path>
</symbol>
使⽤
<svg class="icon-svg nb-index__features-img" aria-hidden="true">
<use class="nb-index__features-img-use"  xlink:href="#iconjulebu"></use>
</svg>
css
.nb-index__features-img-us {
fill: #554321; // 未配置fill的path颜⾊
color: #99870; // currentColor的颜⾊
}
```
2.对于多⾊图标，使⽤css变量进⾏颜⾊处理
```
举例三⾊图标:
配置
<symbol id="iconshangcheng" viewBox="0 0 1046 1024">
<path d="M1038.758731 ..." fill="#333333" ></path>
<path d="M700.883326 ..." fill="#666666 ></path>
<path d="M352.790184 ..." fill="#999999 ></path>
</symbol>
使⽤
<svg class="icon-svg nb-index__features-img" aria-hidden="true">
<use class="nb-index__features-img-use"  xlink:href="#iconjulebu"></use>
</svg>
css
.nb-index__features-img-use {
--primary-color: red; // path1 的颜⾊
--secondary-color: pink;
--tertiary-color: green;
}
```
3.直接在项⽬中修改iconfont.js⽂件本⾝
如果是不同的项⽬使⽤了同⼀个svg图标，完全可以考虑在iconfont⽂件中批量处理svg的颜⾊。这样也能达到多个项⽬，颜⾊各不相同的效果，⽽且不需要在引⽤时再处理颜⾊。
此种⽅式同样适⽤于saas类项⽬，根据当前项⽬配置的主题⾊，动态处理iconfont⽂件。
参考链接：⽤CSS给SVG 的内容添加样式_SVG 教程_W3cplus

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