css - SVG图标继承文本颜色和大小

Question

我想要一些继承父元素的颜色和文本大小的图标。我还希望它在代码的不同部分易于重用。
我尝试使用 fill="currentColor"在 SVG 路径中，但图标的颜色不会变成与文本相同的颜色。图标总是变黑。 ( jsfiddle )

.my-icon-inherit-font-size-and-color {
  content: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 15.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v13.5zM8 4.41c1.387-1.425 4.854 1.07 0 4.277C3.146 5.48 6.613 2.986 8 4.412z"/></svg>');
  height: 0.7em;
}

<p>
  <a href="#" style="font-size: 28px; color: blue">
    <i class="my-icon-inherit-font-size-and-color"></i> Some text
  </a>
</p>

<p>
  <a href="#" style="font-size: 38px; color: red">
    <i class="my-icon-inherit-font-size-and-color"></i> Some text
  </a>
</p>

结果:

在上面的示例中，我希望第一个图标为蓝色，第二个为红色。

Answer 1

面膜结合background:currentColor;可以做到，但您还必须设置宽度:

.my-icon-inherit-font-size-and-color {
  display:inline-block;
  height: 0.7em;
  width:0.5em;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16"> <path d="M2 15.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v13.5zM8 4.41c1.387-1.425 4.854 1.07 0 4.277C3.146 5.48 6.613 2.986 8 4.412z"/></svg>') center/cover;
}

<p>
  <a href="#" style="font-size: 28px; color: blue">
    <i class="my-icon-inherit-font-size-and-color"></i> Some text
  </a>
</p>      
    
<p>
  <a href="#" style="font-size: 38px; color: red">
    <i class="my-icon-inherit-font-size-and-color"></i> Some text
  </a>
</p>