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

Question

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

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

svg 路径中的描边属性有问题，默认为“#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导入它

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

Answer 2

遵循您提供的约定：

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

 export default function App() {
 return (
 <div className="App">
  {/* Changing color directly by passing a style prop */}
  <GrAddCircle style={{ color: "red" }} />
  
  {/* Changing color via CSS class */}
  <GrSubtractCircle className="custom-icon" />
 </div>
  );
  }`

在 CSS 文件（styles.css）中，您可以定义 .custom-icon 类来设置颜色：

.custom-icon { color: blue; } 

确保检查您的 CSS 样式以及可能定义样式的任何其他位置（例如内联样式或 CSS-in-JS 库），以确保不存在阻止颜色更改的冲突规则