SVG iconに色を付ける
2022-05-25
ページ中に表示したSVNのアイコンに対して、色をつけたいというケースがあった
とりあえずcolorプロパティを変更しても反映されなかったため、調べたら
filterプロパティというものがありそれを適切に設定すると色を付けることが可能だった
<img src="hoge.svg" class="red">.red {
filter: invert(13%) sepia(94%) saturate(7466%) hue-rotate(0deg) brightness(94%) contrast(115%);
}個々で指定している数値はRGBから変換できるとうれしいなと思っていたら
下記のようなページで変換するのが良さそう