SVG → React
どんな SVG ファイルからも貼り付けるだけの JSX を生成 — 属性は React の流儀に合わせて改名し、props はルート要素に展開、必要なら TypeScript 版も。
またはクリックして選択 — SVG のみ
コンポーネント名はファイル名から作られます。arrow-left.svg なら ArrowLeft になります。
同じコンポーネントに SVGProps<SVGSVGElement> の型を付けたものです。
マークアップだけ。すでにあるコンポーネントの中に貼り付ける用です。
アイコンをコンポーネントとして
JSX はマークアップに見えますが実体は JavaScript です。stroke-width のようなハイフン付き属性は識別子として無効で、class は予約語とぶつかり、インラインの style 内の波かっこは式として解釈されます。デザインツールからそのままコピーした SVG は、たいていこのどれかでコンパイルに失敗します。
このコンバーターは、直さざるを得ないものだけを改名し、それ以外はそのまま残します。data- と aria- 属性はハイフンのままです。React がそれらをそのまま渡す仕様だからで、ここを改名してしまうのはアクセシビリティのラベルを気づかず失う典型的なやり方です。
3 ステップ
.svg ファイルを選びます。ファイルは端末内に留まります。
完全なコンポーネント、その TypeScript 版、または素の JSX。
ほかのコンポーネントと同じように import し、props でスタイルを調整します。
かんたん回答
外から渡した値を優先させるためです。JSX では後に書いた属性が先の属性を上書きするので、スプレッドを最後に置けば className・width・onClick を外側から指定できます。先頭に置くと、ファイルに焼き込まれた値のほうが静かに勝ってしまいます。
出力に直書きされた fill や stroke を currentColor に置き換え、任意の親要素の CSS で色を指定してください。色が多くのノードに散らばっている場合は、先に SVG カラーチェンジャーに通すと、すべてを一度に currentColor へ変えられます。
そのままでは使えません。React Native には DOM がないため、SVG には react-native-svg と、Svg や Path のように先頭大文字の要素名が必要です。ここで行う属性の改名という考え方は同じですが、import とタグが異なります。
元のファイルがそうなっているためです。圧縮された SVG は圧縮されたまま出てきます。整形は別の作業だからです。先に SVG 整形ツールに通せば、読みやすいインデント付きのコンポーネントになります。
いいえ。変換はブラウザ内での単なる文字列処理です。