fill属性にcurrentColorを指定してSVGの色を変える

2024-08-23

4 months ago

開発環境

next 14.1.0

前提

筆者が使い慣れているという理由だけで実装例にはtailwind cssを利用していますが、tailwindでなくても活用できる実装例の紹介です。

本題

SVGファイルを扱うときに、色を変えたいけど変わらない！と思ったことは一度ぐらいあると思います。

これはSVGファイルのfill属性に色が指定されていることが原因です。

<svg
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 -960 960 960"
  width="24px"
  fill="#e8eaed"
>
  <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" />
</svg>

上記のケースだとfill="#e8eaed"ここの指定です。

色が固定されてしまうと、このページでは色は黒にしたい、あのページではグレイにしたい、またはアイコンボタンとして利用するときはデフォルトで白、ホバーすると赤にしたい！という要望に応えにくくなります。

そんなときはfill属性に"currentColor”を入れます。

<button className="w-fit rounded-full bg-primary p-2 text-background hover:text-secondary">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="24px"
    viewBox="0 -960 960 960"
    width="24px"
    fill="currentColor"
  >
    <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" />
  </svg>
</button>

上記はアイコンボタンの例です。

ボタン要素でホバー時も含めた色の指定を行うことで、アイコンの色を定義しています。

さいごに

今回紹介した方法以外にも、直接fill属性の値をJSで操作するやり方もありますが、アイコンとテキストを連動して色を変えたい時など、柔軟に対応できる点では今回紹介したcurrentColorのやり方がおすすめです。

<button className="w-fit rounded-full bg-primary p-2 text-background hover:text-secondary">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="24px"
    viewBox="0 -960 960 960"
    width="24px"
    fill="currentColor"
  >
    <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" />
  </svg>
  <span>押してね</span>
</button>

参照

https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/color