react-icons - 无法更改颜色垫圈图标答案

【问题标题】：react-icons - Can't change color Grommet iconsreact-icons - 无法更改颜色垫圈图标
【发布时间】：2021-01-29 11:56:09
【问题描述】：

我正在使用 react-icons 和 Font Awesome 图标，我设法通过 2 种方法轻松更改颜色：

使用颜色道具：

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

适用于 css：

.icone {
  color: #023373; 
}

现在，使用 Grommet 图标似乎没有任何效果，图标总是黑色

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

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

【问题讨论】：

github.com/grommet/grommet-icons#customize - 查看文档如何应用颜色

标签： reactjs react-icons

【解决方案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" &&
          `
        fill: #023373;
      `}
      `
    }
  });

【讨论】：

虽然这似乎是扣眼图标的正确答案，但我还是决定换成另一组图标

【解决方案2】：

如果您不想使用 'grommet-icons' 依赖项，而只想使用 'react-icons' ：

您可以使用简单的 css 设置它们的样式：

svg path {
    stroke: #023373;
}

【讨论】：

请更正拼写。