【CSS】currentColorを使ってSVGの色を変える

SVGのぬり色を変更したい場合、SVGにfillのスタイルを当てていたが、例えばエラー時に文字色とボーダーと合わせてSVGの色も変えたいというときに面倒

そんなときcurrentColor を使ったら簡単になることを知ったので調べた

https://www.w3.org/TR/css-color-3/#currentcolor

currentColor は、要素の color プロパティの値を表すキーワードで、<color> 値を受け入れるプロパティで利用することができる

先ほどのエラー時に文字色とボーダーと合わせてSVGの色も変えたいというとき

   color: ${p => p.error ? '#ff0000' : '#000000'};
   border: 1px solid ${p => p.error ? '#ff0000' : '#000000'};
   fill: ${p => p.error ? '#ff0000' : '#000000'};

ではなく、下のように書き直すことができる

   color: ${p => p.error ? '#ff0000' : '#000000'};
   border: 1px solid currentColor;
   fill: currentColor;

特に、SVGでは<svg fill="currentColor" ...>というふうにプロパティに指定しておけば、fillを毎回わざわざあてる必要もなくなるので手間が少し減りそう