SVGからReactコンポーネントへ変換
SVGマークアップを貼り付けると、camelCase属性を持つ、そのままインポートできるReact関数コンポーネントが得られます。
仕組み
SVGはブラウザ自身のDOMパーサーで解析されるため、単なるパターンマッチではなく、実際にマークアップとして理解されます。すべての属性名は、React自身が内部で使うのと同じマッピングを使ってReact/DOMの等価な名前に変換され（stroke-width → strokeWidth、class → className、xlink:href → xlinkHrefなど）、ツリーはJSXとして再シリアライズされ、小さな関数コンポーネントでラップされます。「propsを受け取る」をオンにすると、{...props}がルート要素に展開されるため、呼び出し側は通常のReactの方法でwidth、className、onClickハンドラなどを渡せます。
解析と変換はすべて、入力からブラウザが構築するDOMに対して、このページのJavaScriptで行われます。アップロードは一切行われません。
よくある質問
SVGとJSXの間で何が変わりますか?
属性名がcamelCaseに変わります（stroke-widthはstrokeWidthに、fill-ruleはfillRuleになります）。classはclassNameになり、自己終了タグにはJSXが要求する末尾のスラッシュが付きます。見た目の出力は同一です。
propsからサイズや色を制御できますか?
「propsを受け取る」をオンにすると、コンポーネントはルートの<svg>要素に{...props}を展開するようになり、使用する場所からwidth、height、className、その他任意のプロパティを上書きできます。これはアイコンコンポーネントの標準的なパターンです。
このSVGはどこかに送信されますか?
いいえ。変換はブラウザ内で行われる単純な文字列・属性変換です。アップロードは一切行われません。