我的用法是引导图标，复制您的SVG路径。

span{
    path{
        color: red;
    }
}

SVG引导的一个例子:

        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-exclamation-octagon" viewBox="0 0 16 16">
          <path
            d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z" />
          <path
            d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
        </svg>

为了改变SVG元素的颜色，我发现了一种方法，同时检查下面的谷歌搜索框搜索图标:

.search_icon { 颜色:红色; 填充:currentColor; 显示:inline-block; 宽度:100 px; 身高:100 px; ｝ < span class = " search_icon”> <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-. 27a6.471 6.471 000 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-。59岁4.23 - -1.57 l.27.28v。79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5 s7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg> . < / span >

我使用了一个span元素“display:inline-block”，高度，宽度和设置一个特定的样式“颜色:红色;到svg子元素继承的span标签。

解决方案1 -编辑SVG指向currentColor

<svg>... fill: currentColor stroke: currentColor ...</svg>

然后你可以从你的CSS内容中控制笔画和填充的颜色:

svg {
  color: blue; /* Or any color of your choice. */
}

利与弊:

简单，使用常规支持的CSS。

合适的如果:

你可以控制SVG SVG可以内联包含在HTML中。

解决方案2 - CSS掩码属性

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

  .icon {
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-image: url(https://url.of.svg/....svg);
    mask-image: url(https://url.of.svg/....svg);
    background-color: blue; /* Or any color of your choice. */
    width: 20px;
    height: 20px;
  }

}

利弊

相对容易使用 浏览器对掩码CSS属性的支持是部分的。

合适的如果:

SVG是外部的，通过URL包含 意味着在现代已知的浏览器上使用。

解决方案3 - CSS过滤器属性-静态颜色

如果预先知道颜色，可以使用https://codepen.io/sosuke/pen/Pjoqqp找到将SVG更改为所需颜色所需的筛选器。例如，将svg转换为#00f:

<img src="https://url.of.svg/....svg" class="icon">

.icon {
    filter: invert(8%) sepia(100%) saturate(6481%) hue-rotate(246deg) brightness(102%) contrast(143%);
}

如果你的原始颜色不是黑色，在滤镜列表中加上亮度(0)饱和度(100%)的前缀，将其首先转换为黑色。

利与弊:

可能会有一个小的，不显著的差异之间的结果和期望的颜色。

合适的如果:

想要的颜色是预先知道的。 外部形象

您可以使用字体图标来使用SVG中的任何CSS选项

我正在寻找一种方法来拥有任何CSS选项，如SVG的动画，我最终用我的SVG生成一个字体图标，然后在一个跨度内使用它(如font Awesome)，因此任何CSS选项，如着色，都是可用的。

我使用https://icomoon.io将SVG图像转换为字体图标。然后你可以像Font Awesome或MaterialIcon一样在HTML元素中使用它。

你可以试着用这个css滤镜来给它上色:

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

对于Angular用户来说，"inline-svg-2" npm库非常有用:

https://www.npmjs.com/package/ng-inline-svg-2 将<img src="">替换为<div inlineSVG="path_to_assets"></div> 在屏幕的SCSS文件中设置CSS“color:” 在SVG图片中使用fill="currentColor"或stroke="currentColor"。

您现在可以动态配置CSS颜色，包括使用CSS变量，SVG将会适应。

注意:“currentColor”技巧只适用于内联svg，这就是为什么我们需要一个特殊的模块。