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

Question

I'm using react-icons and with Font Awesome icons I managed to change color easily with 2 approaches:

Works with color prop:

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

Works with css:

.icone {
  color: #023373; 
}

Now, using Grommet icons nothing seems to work, icons are always black

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

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

Answer 1

Full Code : https://codesandbox.io/s/pensive-rgb-r8g1t?file=/src/App.js

For color pass a props (i called it blue) like this.

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

So on the other end style your icon like this.

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

Answer 2

I also search for this problem (since I was using only react-icons<\/em> , and not grommet-icons<\/em> & cie)

svg path {
    stroke: #023373;
}