このツールについて
SVG から JSX コンポーネントへのツールは、生の SVG マークアップを SVGR のようにクリーンな React コンポーネントに変換しますが、完全にブラウザ内で行い、何もアップロードしません。デザインツールからエクスポートしたアイコンを貼り付けると、インポートしてスタイルできるコンポーネントが得られます。SVG を DOMParser で解析し、マークアップが不正なら明確なエラーを報告します。
ハイフン付きや名前空間付きのすべての SVG 属性は React 名に camelCase 化されます（stroke-width は strokeWidth、fill-rule は fillRule、clip-path は clipPath、stop-color は stopColor、xlink:href は xlinkHref、xmlns:xlink は xmlnsXlink）。一方で data-* と aria-* 属性はそのままです。インラインの style 文字列は style オブジェクトになり、path や circle のような空要素は自己終了され、props はルートの <svg {...props}> にスプレッドされるため、コンポーネントは設定可能なまま保たれます。任意のトグルにより、ハードコードされた fill と stroke の値を currentColor に置き換え（アイコンがテキストの色を継承）、width と height を取り除いてコンテナに合わせてスケールさせ、コンポーネントを forwardRef でラップして下層の <svg> ノードを公開できます。
JavaScript か TypeScript の出力を選べます。TypeScript 版は props を React.SVGProps<SVGSVGElement> として型付けし、forwardRef を有効にすると forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>> を使います。コンポーネントはエクスポートされたアロー関数（export const Icon = (props) => (...)）として、選んだ名前とインデントで出力され、アイコンモジュールに貼り付ける準備が整います。