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

SVG を TSX に：型付き React アイコンコンポーネント

SVG から正しい props 型を持つ TypeScript の React コンポーネントを生成します。どのアイコンも className、aria 属性、イベントハンドラを補完付きで受け取れます。

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

const HeartIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="icon icon-heart" {...props}>
    <g id="Layer_1" fill="none" stroke="#e11d48" 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: "#e11d48" }} />
    </g>
  </svg>
);

export default HeartIcon;

プレビュー

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

生成される型の仕組み

コンポーネントの props は SVGProps<SVGSVGElement> 型です。これは React が <svg> 要素に使っている型と同じなので、すべての SVG 属性とイベントハンドラが補完され、不正な props はコンパイル時に TypeScript が検出します。

size オプションを有効にすると props は SVGProps<SVGSVGElement> & { size?: number | string } になり、width と height は size から設定されます。forwardRef を有効にすると ref は Ref<SVGSVGElement> 型になり、親が計測やアニメーションライブラリ用に ref を渡せます。

TSX 出力のチェックリスト

生成したアイコンをコミットする前に、次の点を確認しましょう。

  • コンポーネント名が PascalCase で、ファイル名と一致している（ArrowLeft.tsx）。
  • SVGProps と Ref は型としてのみインポートされ、JavaScript バンドルから消える。
  • viewBox が残っている。これがないとアイコンは拡大縮小できません。
  • コードベースで default エクスポートが禁止されている場合は名前付きエクスポートを使う。

strict モードにも対応

コードは "strict": true と、Next.js・Vite・esbuild が要求する isolatedModules の両方でコンパイルできます。any 型は一切生成されず、size のデフォルト値は分割代入の中にリテラルとして書かれます。

よくある質問

SVGProps と ComponentProps<"svg"> のどちらを使うべき？

どちらも同じ属性を表します。SVGProps<SVGSVGElement> は要素の型が明示的で、React 自身の型定義でも <svg> に使われているため、このツールではこちらを採用しています。

React 19 でも forwardRef は必要ですか？

React 19 では関数コンポーネントが ref を通常の prop として受け取れるため、forwardRef は必須ではありません。ただし React 18 をサポートする必要があるライブラリでは今も有用なので、デフォルトでオフのオプションとして用意しています。

size プロパティが number | string 型なのはなぜ？

数値はピクセル値として扱われ、文字列なら "1em" や "1.5rem" などの CSS 単位を指定して、周囲の文字サイズに合わせてアイコンを拡大縮小できるからです。

アイコンフォルダをまるごと TSX に変換できますか？

できます。すべてのファイルを一度にドロップすると、SVG と同じ名前の .tsx ファイルが生成され、index.ts のバレルファイルとともに ZIP にまとめられます。