無法從反應圖標庫中更改這些圖標的顏色

Question

無論我做什么，我都無法更改這 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;
}

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 folder 導入

現在元素將具有屬性大小（寬度、高度屬性）、標題、類名和顏色。 如果需要，您可以添加更多自定義道具。