[CSS]SVGアイコンの色を変更する方法

SVGアイコンを使用した時にSVGアイコンの色を変更する方法をサクッと変更します。

colorプロパティを使いたいところだけど・・・

CSSでSVGアイコンのサイズや色は変更することができます。

ここで、色変更と聞いたらcolorプロパティを使いたいところですよね。

でも、SVGの場合colorプロパティでは色変更ができません。代わりにfillプロパティを使って色の変更を行います。

それでも変更できない？

後日、サイトを作っているとまた変更できない事態に陥ってしまいました。

結論から言うと、SVGアイコンをインラインで記述していないのが原因のようです。

画像フォルダから読み込んでいたけどfillを指定しても変更できなかった。

なので冗長になってしまうけどCSSで色を変更できない時はインラインで記述することを試してみてください。