SVG アイコンを CSS 変数とか併せて良さげに使う | Basicinc Enjoy Hacking!

こんにちは。@rigani_c です。 みなさん、SVG 吸ってますか？ SVG 吐いてますか？ Web ページ上で自前の SVG アイコンを使用するときの良さげな手法を持ってきました。 結論からいうと SVG スプライトを use タグ使って id 指定で呼んで CSS 変数でスタイルを変更する。更に currentColor 使うと WebFont っぽくなって最高 です。 環境は macOS Mojave の Chrome 70 です。 それではご査収ください。 本記事で SVG アイコンに求めたいこと 以下の通りです。 Web サイト内共通の CSS でパーツごとに色を変えられる ページの表示を阻害しない 修正や管理が楽にできる（@rigani_c 的に） これだけ満たしていれば御の字ですね！ そもそも SVG ってそんなにええのん？ めっちゃいいです。 PNG で 50KB とか