修改svg图标颜色方法-526互联

1. 直接修改svg文件中fill属性

2. 使用css修改svg图标的fill属性

仅对内联svg有效

3. 使用currentColor

只对html中内联的svg有效，包括symbol和use，对background中svg无效

修改svg文件中的fill属性为currentColor，在父级使用color改颜色，或者使用 css样式 svg {fill:red} 修改svg图标颜色

4. 使用css变量

同样只对内联的svg有效

在svg文件，修改fill和stroke为css变量，设置标签style中的css变量即可

5. 使用mask

对内联和背景图标均有效，推荐

.icon {
    color: red;
    background-color: currentColor;
    mask-image: url(icon.svg);
}

6. 使用drop-shadow, 多重彩色影分身

<i class="icon"><i class="icon icon-del"></i></i>

.icon > .icon {
    position: relative;
    left: -20px;
    border-right: 20px solid transparent;
    filter: drop-shadow(red 20px 0px);
}

或者 (用绝对定位麻烦, img标签不妥)

<div style="position: relative; width: 20px; height: 20px; overflow: hidden;">
    <img src="icon.svg" style="position:absolute; left: -20px; filter: drop-shadow(20px 0 #32bb65)"/>
</div>

7. 使用滤镜

简单的纯黑或纯白图标

/* 图标变黑色 */
.black {
    filter: brightness(0);
}
/* 图标变白色 */
.white {
    filter: brightness(100);
}

其他颜色的图标也可以使用多个滤镜进行模拟，具体可参考图标变色为任意指定颜色

8. svg多色图标

使用css变量进行穿透，可以穿透use标签的shadow DOM

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
    <symbol id="my-first-icon" viewBox="0 0 20 20">
        <title>my-first-icon</title>
        <path fill="var(--color-1)" d="..." />
        <path fill="var(--color-2)" d="..." />
        <path fill="var(--color-3)" d="..." />
    </symbol>
</svg>

<svg class="icon icon-colors">
    <use xlink:href="#my-first-icon" />
</svg>

.icon-colors {
    --color-1: #c13127;
    --color-2: #ef5b49;
    --color-3: #cacaea;
}

参考：https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/
https://juejin.cn/post/7120895248665935902