如何将语义 ui 图标颜色更改为 ReactJs 中定义的颜色？
How to change semantic ui icon colour to defined colour in ReactJs?
我在使用不同图标的地方使用 semantic ui for react。然而，其中一个图标必须具有不同的颜色。
我们可以通过道具改变颜色
<Icon name="play" color="red"/>
我真正想做的是改变我创建的图案的颜色。我在 .png 中有模式，我尝试了不同的方法，包括：
<Icon name="play" style={{color: url('./path_to_image')}}
但是失败了。有什么想法可以将图标的颜色更改为自定义图案吗？
我还找到了一个潜在的解决方案，我自己创建 .svg 图像然后设置样式，但我希望找到更直接的东西而不是 'reinventing the wheel'。
无法完成您尝试使用道具完成的任务。此外，您尝试应用的 color css 属性不接受路径。
您或许可以使用 Semantic 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. You'll also see in the tutorial that all the other solutions to accomplish this are SVG based.
我在使用不同图标的地方使用 semantic ui for react。然而，其中一个图标必须具有不同的颜色。 我们可以通过道具改变颜色
<Icon name="play" color="red"/>
我真正想做的是改变我创建的图案的颜色。我在 .png 中有模式，我尝试了不同的方法，包括：
<Icon name="play" style={{color: url('./path_to_image')}}
但是失败了。有什么想法可以将图标的颜色更改为自定义图案吗？
我还找到了一个潜在的解决方案，我自己创建 .svg 图像然后设置样式，但我希望找到更直接的东西而不是 'reinventing the wheel'。
无法完成您尝试使用道具完成的任务。此外，您尝试应用的 color css 属性不接受路径。
您或许可以使用 Semantic 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. You'll also see in the tutorial that all the other solutions to accomplish this are SVG based.