react-iconsの色を変えたい

Question

前提・実現したいこと

現在Reactの勉強をしています。

react-iconsを使ってアイコンを表示しているのですが、色の変え方がわかりません。
https://react-icons.github.io/react-icons/

黒色なのを例えば赤に変えるにはどうしたらいいでしょうか？

試したこと

以下のようにしてみましたが色が変化しませんでした。

import { IconContext } from "react-icons";

<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
  <div>
    <GrDownload />
  </div>
</IconContext.Provider>

参考：https://github.com/react-icons/react-icons#configuration

Answer 1

回答締め切っちゃってますが、せっかくなので投稿しますm(__)m

SVGの作りによってはcolorを渡しても色が変わらないようでした。

色が変えられるアイコンの作り

色が変えられるSVGは以下のようになっています。
fillはHTMLでいうとbackgroundみたいなものです。

<svg>
  <path fill="#000" />
</svg>

色が変えられないアイコンの作り

質問者さんが使用している色が変えられないSVGは以下のようになっていました。
strokeはHTMLでいうとborderみたいなものです。

<svg>
  <path stroke="#000" />
</svg>

対処方法

CSSのセレクタを使って、strokeの変更をおこなえば、変更することは可能でした。
※SVGで使われている要素は必ずしもpathでは無い可能性があるため、SVG要素を調べる必要はあります。

import { GrDownload } from "react-icons/gr";
import './icon.css';

function App() {
  return (
    <div className="App">
      <GrDownload className="ico-GrDownload" />
    </div>
  );
}

/* icon.css */
.ico-GrDownload path {
    stroke: #f00; /* 赤に変更 */
}

Comments

[k49977]

回答頂きありがとうございます。
strokeを変えるのですよね！

CSSファイルでする方法ありがとうございます。
ちなみにjs内でインラインでcssを適用することはできますでしょうか？
pathのstrokeに対してインラインでやる方法が思いつきませんでした

[runnynose]

react初心者なんですか、私の知る限りではセレクタの指定みたいなのはできないと思います。

[k49977]

ありがとうございます。CSSファイルを用意する方向で考えたいと思います！

Answer 2

以下の実装のように
https://codesandbox.io/s/angry-tree-j6zxr?file=/src/App.js

やはりGrDownloadは色が変化しませんでした。色を変更できないものもあるのかもしれません

▼Sample.js

import React, { Component } from 'react';
import { FaApple, FaAndroid } from 'react-icons/fa';
import { IoIosCloudCircle, IoIosHeartEmpty } from "react-icons/io";
import { MdDone } from "react-icons/md";
import { TiChartLineOutline } from "react-icons/ti";
import { GoBeaker } from "react-icons/go";
import { FiAlertOctagon } from "react-icons/fi";
import { GiFlyingTrout } from "react-icons/gi";
import { WiBarometer } from "react-icons/wi";
import { DiChrome } from "react-icons/di";
import { AiFillApi } from "react-icons/ai";
import {GrDownload} from "react-icons/gr";
import { IconContext } from "react-icons";


class Sample extends Component {
    render() {
        return (
            <h3>
                <FaApple color={'red'}/>
                <FaAndroid color={'red'} />
                <IoIosCloudCircle  color={'red'} />
                <IoIosHeartEmpty  color={'red'} />
                <MdDone  color={'red'} />
                <TiChartLineOutline  color={'red'} />
                <GoBeaker  color={'red'} />
                <FiAlertOctagon  color={'red'} />
                <GiFlyingTrout  color={'red'} />
                <WiBarometer  color={'red'} />
                <DiChrome  color={'red'} />
                <AiFillApi  color={'red'} />
                <GrDownload  color={'red'}/>
                <IconContext.Provider value={{ color: "blue" }}>
                    <div>
                        <FaApple />
                        <FaAndroid />
                        <IoIosCloudCircle />
                        <IoIosHeartEmpty  />
                        <MdDone />
                        <TiChartLineOutline  />
                        <GoBeaker />
                        <FiAlertOctagon />
                        <GiFlyingTrout />
                        <WiBarometer  />
                        <DiChrome/>
                        <AiFillApi/>
                        <GrDownload />
                    </div>
                </IconContext.Provider>
            </h3>
        )
    }
}

export default Sample

参考：https://mebee.info/2020/03/25/post-7296/#outline__1

Answer 3

表示したいアイコンの呼び出しはされてますか？？
色の変更はCSSと同じ16進数とかでもできそうです。(例：#ff0000)

import { FaFolder } from 'react-icons/fa';

Comments

[k49977]

はい、呼び出しはできています。
すみません、例が悪かったのですが、アイコンに関しては具体的にはGrDownloadです。（修正しておきます）

もしかしたら色が変えられないなどありますでしょうか。

[k49977]

回答いただきありがとうございます

[runnynose]

あ、締め切っちゃいましたね笑
色変えられましたよ。

[runnynose]

せっかくなので新たに回答を投稿します！