【CSS】svgタグにcolorで色を指定する

svgタグにfillではなくcolorで色を指定

svgタグに色指定する場合、通常は専用のfillというプロパティで色を指定しますが、文字色のようにcolorで色指定できるようにするには下記のように指定します。

svg {
  fill: currentColor;
}

currentColorには、svgタグの親要素に指定されているcolorの値が入ります。これでいちいちfillプロパティを追加することなく色の適用ができますね。

ちなみにReactのstyle等では下のように文字列でcurrentColorを指定します。

<svg style={{ fill: 'currentColor' }} />