CSS本地svg图标颜色

Question

我正在尝试设置一些像这样的自定义 svg 图标

<i class="my-svg-icon"></i>

我显示了 svg，但无法调整颜色

.my-svg-icon {
    height: 25px;
    width: 25px;
    color: red !important;
    content: url('/mysvg.svg');
}

我已将 svg 中的描边设置为 currentColor，填充为无。

Answer 1

使用 SVG 填充颜色

直接填充颜色

直接在 SVG 中指定颜色：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

使用

currentColor

将 SVG 的填充颜色设置为继承其父元素的颜色：

<svg width="100" height="100" fill="currentColor">
  <circle cx="50" cy="50" r="40" />
</svg>

<!-- Parent element with color -->
<div style="color: blue;">
  <!-- SVG will inherit this color -->
  <svg width="100" height="100" fill="currentColor">
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>

使用

currentColor

确保 SVG 颜色与父元素的文本颜色相匹配，使其更适应样式更改。

.my-svg-icon {
    color: red;
}

<div class="my-svg-icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-emoji-heart-eyes-fill" viewBox="0 0 16 16">
    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434m6.559 5.448a.5.5 0 0 1 .548.736A4.5 4.5 0 0 1 7.965 13a4.5 4.5 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242s1.46-.118 2.152-.242a27 27 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zm-.07-5.448c1.397-.864 3.543 1.838-.953 3.434-3.067-3.554.19-4.858.952-3.434z"/>
  </svg>
</div>