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

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 路径中的 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创建自己的自定义图标并直接从图标文件夹中导入

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

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

can't change color of these icons from react icons library

icons

reactjs