Как изменить цвет иконки семантического интерфейса на определенный цвет в ReactJs?

Question

Я использую семантический интерфейс для реакции , где я использую различные значки.Однако одна из этих иконок должна иметь другой цвет.Мы можем изменить цвет с помощью реквизита

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

То, что я действительно хочу сделать, это изменить цвет с рисунка, который я создал.У меня есть шаблон в .png, и я пробовал разные методы, в том числе:

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

Но это не удается.Любые идеи, как я мог бы изменить цвет значка на самоопределенный шаблон?

Я также нашел потенциальное решение, где я сам создаю изображение .svg, а затем стилизую его, но я бы хотел найти что-то ещепросто, а не «изобретать велосипед».

Answer 1

Невозможно выполнить то, что вы пытаетесь сделать с помощью реквизита.Кроме того, атрибут color css, который вы пытаетесь применить, не принимает путь.

Вероятно, этого можно добиться с помощью значков в семантическом интерфейсе, но ваше решение может работать не так, как ожидается во всех браузерах.Вам нужно знать, что значки в Semantic UI на самом деле являются шрифтами (из FontAwesome).Следовательно, вы не можете использовать любые SVG-решения, если у вас нет собственных компонентов иконок на основе SVG.

Лучше всего будет использовать -webkit-background-clip: text , хотя не все браузеры поддерживают это, и у вас естьиспользовать неофициальный префикс .

CSS Tricks имеет хороший учебник о том, как это сделать .В учебном пособии вы также увидите, что все другие решения для достижения этой цели основаны на SVG .