svg-icon修改顏色

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有源碼