Raectでsrc以下のsvgをインポートした時に、cssで色を変える方法

はじめに

Reactで、src/assets以下のSVGをimportして使用した時、うまいこと色が変えられなかったので調べてみました。

問題

いつも通りcssでcolor: red;のような形でSVGに色をつけようとしましたがうまくいきませんでした。
fillやstrokeも効果がなく、仕方ないのでググってて解決に至りました。

解決方法

主に二つの方法でうまくいったので、必要に応じて以下の二つを使い分けるといいと思います。

1 そのアイコンに設定したい色がプロジェクト全体で一色だけの時 -> SVGファイル自体を書き換えて色をつける

.svg

<path fill-rule="evenodd" clip-rule="evenodd" d="M8.52859 ~~省略~~" fill="#000"/>

例えばこの時、色はfillプロパティに設定された"#000"、つまり黒となります。
ここを設定したい色に書き換えてあげればだけです。

2 場所によってそのSVGに設定したい色が違う -> cssのfilterを用いて色を変える

今回はこちらの方法を使って解決しました。
こちらの方法だと、cssでその都度色を変えられるので便利です。

.css

.hoge {
    filter: brightness(0) saturate(100%) 
            invert(16%) sepia(96%)saturate(7359%) 
            hue-rotate(360deg) brightness(100%) contrast(112%);
}

要素に対してfilterを与えると、svgの色が変更できます。ちなみにこれは#ff0000、赤色になります。
みてわかるように人が書くのは無理なので、便利なサイトを使ってgenerateします。

こちらのサイトで、HEX値またはRGB値を渡すと対応したfilterを生成することができます。
あとはコピペして貼り付けるだけです。

おわりに

最後までお読みいただきありがとうございました。