svg-icon修改颜色

时间：2021-06-26 23:26:42 阅读：23 评论：0 收藏：0 [点我收藏+]

1.找到相对应的svg文件

比如我使用的图标名：lights

vue：

<svg-icon icon-class="lights" class="set-svg-color" :style="{color:‘#c3f432‘}" />

文件：技术分享图片

2.修改，将固定颜色改为自定义名称

　　技术分享图片

3.增加样式

　　(1)增加class类（我这里把颜色加到style内了）

<svg-icon
   icon-class="lights-custom"
   class="set-svg-color"
   :style="{ color: scope.row.color }"
/>

　　(2)全局增加样式

// svg-icon:lights图标全局默认样式，fill中的参数为刚刚在svg文件中添加的自定义名称

.set-svg-color { 
　　color:#ffb300;
　　fill:currentColor;
 }

想改变颜色修改color即可，也可动态增加颜色，3.1有源码

原文：https://www.cnblogs.com/DeerLin/p/14938638.html

踩

(0)

评论一句话评论（0）

分享档案

更多>