SVGアイコンを文字色へ合わせる：currentColorと固定色を比べよう

ボタンの文字色を変えたのに、中のSVGアイコンだけ黒いまま。そんなときは、SVGの色を固定するか、文字色へ合わせるかを分けて考えてみよう。

currentColorはcolorの値を使う

CSSのcurrentColorは、その要素のcolorプロパティの値を表すキーワード。アイコンの線に使うと、親から受け継いだ文字色に合わせやすくなるよ。

<button class="action" type="button">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M5 12h14M12 5v14"
      fill="none" stroke="currentColor" stroke-width="2" />
  </svg>
  追加する
</button>

.action { color: #4f419a; }
.action svg { width: 1.2em; height: 1.2em; }

ここでは、文字のあるボタンの補助アイコンなのでSVGを装飾として扱っている。アイコンだけのボタンに名前を付ける方法は、アクセシブルな名前の解説で確認してね。

作例で固定色と比べる

下の作例には、固定色のアイコンとcurrentColorのアイコンを並べている。テーマ色を切り替え、どちらが文字色と一緒に変わるか見てみよう。色名も文字で表示するので、色だけで状態を判断する必要はないよ。

リセットで最初の紫へ戻せる。押しても実際の追加処理や外部通信は行わない、色の比較だけの作例だよ。

外部のSVG画像とは扱いが違う

この例はHTML内に直接書いたインラインSVG。img要素で読み込んだ別ファイルのSVG内部へ、親ページのcolorが同じように入り込むと考えないでね。外部SVGの色を変えたい場合は、ファイル側の設計や別の方法も必要になる。

また、ブランドのロゴや複数色の図を、すべて文字色へ合わせればよいわけでもない。単色の補助アイコンなど、意味とデザインに合う場所へ使おう。

仕様はMDNの色の値とcurrentColorで確認できる。表示サイズと内部座標の違いは、viewBoxの基礎と合わせて読むと整理しやすいよ。