SVGアイコンを使用した時にSVGアイコンの色を変更する方法をサクッと変更します。
colorプロパティを使いたいところだけど・・・
CSSでSVGアイコンのサイズや色は変更することができます。
ここで、色変更と聞いたらcolorプロパティを使いたいところですよね。
でも、SVGの場合colorプロパティでは色変更ができません。代わりにfillプロパティを使って色の変更を行います。
See the Pen yjzvrd by code-school (@code-school) on CodePen.
SVGタグの方でクラス(もしくはID)の指定を忘れないようにしましょう。
まとめ
いかがでしたでしょうか？今回、SVGのカラーをCSSで変更する方法を紹介しました。
まとめると、
- colorプロパティではSVGの色変更はできない！
- SVGの色変更はfillプロパティで行う！
ですね。ぜひ参考にしてみてください。