javascript - 如何将语义 ui 图标颜色更改为 ReactJs 中定义的颜色？

Question

我使用semantic ui for react我使用不同的图标的地方。然而，这些图标之一必须具有不同的颜色。我们可以通过props改变颜色

 <Icon name="play" color="red"/>

我真正想做的事情是改变我创建的图案的颜色。我有 .png 格式的图案，我尝试了不同的方法，包括:

<Icon name="play" style={{color: url('./path_to_image')}}

但是失败了。有什么想法可以将图标的颜色更改为自定义图案吗？

我还找到了一个潜在的解决方案，我自己创建 .svg 图像，然后对其进行样式设置，但我希望找到更简单的东西，而不是“重新发明轮子”。

Answer 1

不可能用 props 来完成你想要做的事情。此外，您尝试应用的 color css 属性不接受路径。

您可能可以使用语义 UI 中的图标来完成此操作，但您的解决方案可能无法在所有浏览器中按预期工作。您需要知道 Semantic UI 中的图标实际上是一种字体(来自 FontAwesome)。因此，除非您自带基于 SVG 的图标组件，否则您无法使用任何 SVG 解决方案。

您最好的选择可能是使用 -webkit-background-clip: text though not all browsers support this, and you have to use the unofficial prefix .

CSS Tricks has a good tutorial on how to do this 。您还将在教程中看到 all the other solutions to accomplish this are SVG based .