react-icons - не удается изменить цвет значков втулки

#reactjs #react-icons

#reactjs #реагирующие значки

Вопрос:

Я использую react-icons, и с помощью значков Font Awesome мне удалось легко изменить цвет с помощью 2 подходов:

Работает с цветовой опорой:

 <FaUserTimes /* color="#023373" */ className="icone icone-40" />

Работает с css:

 .icone {
  color: #023373; 
}

Теперь при использовании значков втулки ничего не работает, значки всегда черные

 <GrFormAdd color="#023373" className="icones" />

.icones {
    font-size: 30px; **Font size works!?**
    color: #023373;
}

Ответ №1:

Полный код: https://codesandbox.io/s/pensive-rgb-r8g1t?file=/src/App.js

Для цвета передайте реквизит (я назвал его синим) следующим образом.

 <Apple color="blue" size="xlarge" />

Итак, на другом конце оформите свой значок следующим образом.

 const customColorTheme = deepMerge(base, {
    icon: {
      extend: css`
        ${(props) =>
          props.color === "blue" amp;amp;
          `
        fill: #023373;
      `}
      `
    }
  });

Ответ №2:

Если вы не хотите использовать зависимость ‘grommet-icons’, а только ‘react-icons’ :

вы можете стилизовать их с помощью простого css :

 svg path {
    stroke: #023373;
}