使用CSS引入本地SVG图标后无法修改颜色的问题求助

问题出在你用content: url()引入SVG的方式上：这种方式加载的SVG是独立的外部资源，和宿主<i>元素不在同一个文档上下文里，哪怕SVG里设置了stroke="currentColor"，也无法继承宿主元素的color值。

下面是几种可行的解决方法：

方法一：改用内联SVG标签 #

直接把SVG代码嵌入到页面中，让它和宿主元素共享上下文：

<svg class="my-svg-icon" viewBox="0 0 24 24">
  <!-- 替换为你的SVG路径代码 -->
  <path stroke="currentColor" fill="none" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"></path>
</svg>

CSS保持你的设置即可：

.my-svg-icon {
  height: 25px;
  width: 25px;
  color: red;
}

方法二：使用CSS Mask属性（适合单色图标） #

通过mask将SVG作为遮罩，用background-color控制图标颜色：

.my-svg-icon {
  height: 25px;
  width: 25px;
  background-color: red;
  /* 兼容webkit内核浏览器 */
  -webkit-mask: url('/mysvg.svg') no-repeat center/contain;
  mask: url('/mysvg.svg') no-repeat center/contain;
}

注意：此方法需要确保SVG的描边/填充为非透明（比如黑色），因为遮罩是根据元素透明度来生效的。

方法三：用SVG Symbol复用图标 #

先在页面中定义SVG Symbol（可放在页面顶部并设置隐藏）：

<svg style="display: none;">
  <symbol id="my-custom-icon" viewBox="0 0 24 24">
    <path stroke="currentColor" fill="none" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"></path>
  </symbol>
</svg>

然后通过<use>标签引用：

<i class="my-svg-icon">
  <svg><use href="#my-custom-icon"></use></svg>
</i>

CSS调整为：

.my-svg-icon svg {
  height: 25px;
  width: 25px;
  color: red;
}

内容的提问来源于stack exchange，提问作者user3074140