Css 用于继承文本颜色和大小的SVG图标

我希望有一些图标继承父元素的颜色和文本大小。我还希望它能够很容易地在代码的不同部分重用

我试图在SVG路径中使用

fill=“currentColor”

，但图标的颜色与文本的颜色不同。图标始终变为黑色。（）

。我的图标继承字体大小和颜色{
内容：url（'data:image/svg+xml；utf8'）；
高度：0.7em；
}

结合

背景的遮罩：currentColor可以执行此操作，但还必须设置宽度：


。我的图标继承字体大小和颜色{
显示：内联块；
高度：0.7em；
宽度：0.5em；
背景：彩色；
-webkit掩码：url（'data:image/svg+xml；utf8'）中心/封面；
}