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

如何解决无法从反应图标库更改这些图标的颜色

无论我做什么，我都无法更改这2个反应图标的颜色，我不确定它们是否设置为不可更改。我以前用过其他图标，还没有这个问题，谢谢！

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;
}

解决方法

svg中path的stroke属性存在问题，默认为“＃000”，这意味着它将始终为黑色，应为“ currentColor”

作为解决此库中该特定元素的问题的方法

我做了以下

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;

然后在src中，我创建了一个名为Icons的文件夹，以用作我自己的自定义图标

然后在我创建的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>
  );
};

通过这种方式，您可以基于react-icons创建自己的自定义图标，并直接从Icons frolder导入

现在该元素将具有属性大小（宽度，高度属性），标题，类名称和颜色。您可以根据需要添加更多自定义道具。