SVGからReact JSX / TSXへのコンバーター

アイコンをテキストのように扱う

アイコンコンポーネントは、配置された場所から色とサイズを受け取るようにすると再利用しやすくなります。ハードコードされたfillまたはstrokeの色をcurrentColorに置き換えると、アイコンが周囲のテキスト色に追従します。viewBoxは残したままwidthとheightを削除し、CSSまたはclassNameでサイズを設定してください。先にSVGクリーナーでファイルを処理すると、最終的なバンドルに入り込むエディターのメタデータを除去できます。

ID、スタイル、アクセシビリティ

グラデーション、マスク、クリップパスはidで参照されます。同じコンポーネントを2回描画すると、ページ内に重複したIDが生じ、2つ目のコピーが1つ目のグラデーションを参照する可能性があります。これらを使うアイコンでは、ReactのuseIdで一意のIDを生成してください。

SVG内の<style>要素は、波かっこが式として解釈されるためJSXを壊します。ルールを属性またはスタイルシートに移してください。装飾用のアイコンにはaria-hidden="true"を、意味を持つアイコンにはrole="img"と<title>を追加します。

使い方

1. 生のSVGマークアップを貼り付けます。
2. コンポーネント名、TypeScriptのインターフェース、props転送を設定します。
3. すぐ使えるReactコンポーネントのコードをコピーします。

プライバシーと制限事項

マークアップの変換はクライアント側のJavaScript内だけで実行されます。