无法从反应图标库中更改这些图标的颜色

Question

no matter what I do, I can't change color of these 2 react icons, I am not sure if they are set to be not changeable. I used other icons before, haven't had this issue yet, Thank you!

import React from "react";
import "./styles.css";
import { GrSubtractCircle, GrAddCircle } from "react-icons/gr";

export default function App() {
  return (
    <div className="App">
       <GrAddCircle id="try"/>
      
    </div>
  );
}

css

#try{
  color: green;
}
svg{
  color: aqua;
}

Answer 1

There is a problem with the stroke attribute in path in svg its defaulted to "#000" which means it will always be black color it should be "currentColor"

as a work around this problem with this particular element in this library

i did the following

import React from "react";
import { GrAddCircle } from "./Icons";

function App() {
  return (
    <div className="App">
      <GrAddCircle
        color="red"
        title="folder icon"
        className="additional-class-name"
      />
    </div>
  );
}

export default App;

then in src i created folder called Icons to work as my own custom Icons

then inside the folder i created index.js

import React from "react";

export const GrAddCircle = ({ color, size, title, className }) => {
  return (
    <svg
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      height={ size ? size : "1rem" }
      width={ size ? size : "1rem" }
      style={{ color }}
      className={ className ? className : '' }
    >
      { title ? <title>{title}</title> : null }
      <path
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,18 L12,6 M6,12 L18,12"
      ></path>
    </svg>
  );
};

this way you can create your own custom icons based on react-icons and import it from Icons frolder directly

now the element will have the property size (width, height attributes), title, className and color. you can add more custom props if you want.