fill指定が効かない？SVGアイコンを currentColor で色変更する方法

いろんな画面で、色違いで使用したいアイコン

色の変更の実装で、時間を費やしてしまったので備忘録

色つかん

index.htmlから色を渡すが

index.html

<th:block th:replace="~{components/icons/icon :: muscle('text-custom-red')"></th:block>

fill="${fill}" では全く反応してくれない...

icon.html

<svg th:fragment="muscle(fill)" width="14" height="16" viewBox="0 0 14 16" fill="${fill}" xmlns="http://www.w3.org/2000/svg">
    <path d="M4.30067"/>
</svg>

th:attr="fill='${fill}'" でもだめだった...

解決方法：currentColor

currentColorを使って親要素のcolorプロパティに設定された色を継承

icon.html

<div class="text-red-50">
    <svg width="14" height="16" viewBox="0 0 14 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.30067"/>
    </svg>
</div>

currentColorって？？

CSSの color プロパティの現在の値を指す

例

<div style="color: green">
  <svg fill="currentColor">
    <circle cx="10" cy="10" r="5" />
  </svg>
</div>

• div の color が green
• SVG の fill が currentColor → color: green を参照

参考サイト