SVGをReact JSXコンポーネントに変換

SVGをReact JSXコンポーネントに変換

raw SVG マークアップを貼り付け、クリーンなReact関数コンポーネントを返します。このツールはすべての属性に対して決定論的なcamelCase変換を適用し、非JSX構文を削除し、出力の一部を読み取り可能なコンポーネントにラップします——オプションで型付け、オプションで forwardRef-ラップされ、オプションでプロパティでサイズを調整できます。すべてがブラウザ内で実行されるため、アイコンやロゴはあなたのマシンに残ります。

使用方法

1. 完全な <svg>…</svg> マーカーを入力ボックスに貼り付けます。
2. コンポーネント名を設定（PascalCase、例 ArrowRightIcon).
3. TypeScriptを切り替えます forwardRef、スケーラブルなサイズプロパティ、およびプロパティのスプレッドをプロジェクトに合わせて設定します。
4. 生成されたJSXをコピーするか、または .tsx / .jsx ファイル。

機能

• camelCase属性 – stroke-width になります strokeWidth, fill-rule になります fillRule、そしてSVG仕様のすべてにわたって適用されます。
• 予約語の処理 – class は className, for に htmlForと、 xlink:href に xlinkHref.
• インラインスタイルパーサー – style="color: red; font-size: 12px" はcamelCaseキーを持つJSXスタイルオブジェクトに変換されます。
• TypeScript出力 – 型定義を有効にすると生成します。 React.SVGProps<SVGSVGElement> スケーラブルアイコンモード
• – 幅/高さのハードコードされた値を プロパティに置き換え、意味のあるデフォルト値を提供します。 width と height forwardRefラッパー
• – デベロッパーツールにアクセスできる コンポーネントを発行します。 React.forwardRef for DevTools。 displayName プロパティスプレッド
• – ルートに任意のプロパティを転送 消費者が <svg> 、ARIA、またはイベントハンドラを設定できるようにします。 className、ARIA、またはイベントハンドラ。
• オフライン設計 – SVGはブラウザに留まります。アップロードやサーバーとの通信はありません。