项目中使用了大量的svg图标，一开始只是导入直接使用，直到产品提出要根据条件修改图标的颜色

svg教程||菜鸟教程

可以简单看下教程了解下svg

SVG 意为可缩放矢量图形，SVG 使用 XML 格式定义图像。

导入项目的svg图标大概是这样

有个path路径，并且有类名

在style中有个fill对应的颜色就是svg的图标颜色

关于这个fill属性，大概的解释是fill 属性设置形状内的颜色

需要改颜色的话，要在svg图标的内部，把这个类名改成这样

	.st0{fill:currentColor;}

然后再加一个svg类名，path上的类名不用动

  .svg{
    fill:currentColor;
    color:#1890FF;//这里是默认颜色
}

在页面上通过v-if控制

 <svg-icon class-name="xxx" icon-class="xxx" v-if="scope.row.deptCode == '1'" style="fill: currentColor; color: c0c4cc"></svg-icon>
 <svg-icon class-name="xxx" icon-class="xxx" v-else style="fill: currentColor; color: #1890ff"></svg-icon>
            新增下级
          </el-button>

2024年7月24日更新~~~~~~

今天遇到一样的要求，要改svg颜色，我找到自己写的这篇文章，发现当时记录的有些杂乱

直接改这个类名就能起作用

不过我遇到个小bug，就是四个svg图标有三个起作用了，有一个没有效果
发现原来是svg图标命名重复了，就是有两个svg图标的名字都一样，改成不一样的名字之后，都有效果