Question

我使用semantic ui for react（其中使用不同的图标）。但是，这些图标之一必须具有不同的颜色。我们可以通过道具更改颜色

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

我真正想做的是改变我创建的图案的颜色。我在.png中有模式，并且尝试了不同的方法，包括：

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

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

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

Answer 1

使用道具无法完成您想做的事情。此外，您尝试应用的color css属性不接受路径。

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