本文へスキップ
SvgJsx
言語: 日本語

SVG アイコンを currentColor 対応にする

固定値の fill と stroke の色を currentColor に置き換えると、アイコンは親要素の文字色を継承し、ホバーで色が変わり、ダークモードにも自動で対応します。

クイックプリセット:
.svg ファイルをここにドロップ、またはファイルは FileReader でローカルに読み込まれ、アップロードされることはありません。
オプション
エクスポート:
import type { SVGProps } from "react";

const HeartIcon = ({ size = 24, ...props }: SVGProps<SVGSVGElement> & { size?: number | string }) => (
  <svg viewBox="0 0 24 24" className="icon icon-heart" width={size} height={size} {...props}>
    <g id="Layer_1" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "currentColor" }} />
    </g>
  </svg>
);

export default HeartIcon;

プレビュー

変換後の SVG のプレビュー
元の SVG
706B
最適化後の SVG
548B(-22%)
コンポーネント
692B

currentColor の仕組み

currentColor は、要素の color プロパティの計算値を参照する CSS キーワードです。SVG で fill="currentColor" を使うと、Tailwind のクラス、リンクのホバー状態、ダークモードのメディアクエリなど、どこから来た色であっても親要素に適用されている色でアイコンが描画されます。

デザインツールは fill="#111827" のような固定の 16 進数カラーでアイコンを書き出します。これではアイコンが 1 色に固定され、テーマごとに別のファイルを管理しなければなりません。currentColor に変換すれば、1 つのファイルをどこでも使えます。

ツールが変更する内容

currentColor オプションを有効にすると：

  • 色の値を持つ fill と stroke 属性が currentColor になります。
  • インラインの style 属性内の fill と stroke も置き換えられます。
  • none、transparent、inherit、url(#gradient) の参照はそのまま残るので、輪郭線やグラデーションも正しく動作します。
  • グラデーションの stop-color など、その他の色は変更されません。

currentColor を使うべきでない場合

多色のイラスト、ブランドロゴ、国旗などは複数の特定の色で成り立っています。すべてを 1 色に置き換えると平坦な見た目になってしまいます。こうしたファイルは元の色を残すか、テーマに合わせて変えたい一部の色だけに CSS カスタムプロパティを使いましょう。

よくある質問

変換後にアイコンが黒くなったのはなぜ？

currentColor は CSS の color プロパティを継承します。親に色が設定されていない場合、ブラウザのデフォルトは黒です。アイコンか親要素に色を設定してください（例：class="text-blue-600"）。

currentColor は線（stroke）にも使えますか？

使えます。fill と stroke のどちらも currentColor を受け付けます。Lucide や Heroicons などの線画アイコンセットが stroke="currentColor" を使っているのはそのためです。

<img> タグで currentColor は使えますか？

使えません。<img> や CSS の background-image で読み込んだ SVG はページの CSS から切り離されるため、currentColor は黒になります。SVG はインラインで埋め込む必要があり、それを実現するのがコンポーネントです。

グラデーションは引き続き動作しますか？

はい。url(#id) でグラデーションを参照している塗りは変更されず、id の削除を有効にしていても参照されている id は保持されます。