使用 currentColor 的自定义图标

我想在一个默认没有图标的主题中显示一些自定义图标。通常这没问题,但我无法使用 currentColor 来设置填充色。

所以这样是有效的:
&::before {content: svg-uri('<svg fill="red" ...

Screenshot from 2021-07-30 16-20-34

但这样不行,它只会默认为黑色:
&::before {content: svg-uri('<svg fill="currentColor" ...

Screenshot from 2021-07-30 16-21-09

有人以前做过类似的事情吗?我不确定我漏掉了什么……

据我所知,currentColor 无法与通过 CSS 内联的 SVG 配合使用,遗憾的是,SVG 中的颜色需要硬编码。我之前用过的一种变通方法是使用 CSS 滤镜 来更改颜色,但这种方法也存在一些局限性。

啊,好的。谢谢 @awesomerobot!听起来,唯一能同时支持不同配色方案的方案就是将图标直接放在标记中?

是的,很遗憾!我希望 CSS 能有更好的方法,因为在某些地方,用 CSS 添加装饰性图标其实更简单。