SVGファイルをReactコンポーネントに入れる
デザインツールの書き出すSVGはHTML的に無効な属性を含みます。そのマークアップをコンパイルできるJSXコンポーネントにする早い方法です。
このガイドで使う道具
やりたいこと
Figmaが<svg class="icon" stroke-width="2" xlink:href="#a">のような出力をしますが、JSXは3つとも拒否します。手で直すのは1個なら済みますが、アイコンセット全体では面倒です。
変換方法
SVGをコンバータに貼ります。class→className・stroke-width→strokeWidth・xlink:href→hrefを書き換え、style文字列をオブジェクト化し、名前付き関数コンポーネントで包みます。TypeScriptオプションを有効にすると、...restをsvg要素へ渡すprops型が付きます。
具体例
<svg viewBox="0 0 24 24" stroke-width="1.5"><path d="M4 6h16"/></svg>は、出力が<svg viewBox="0 0 24 24" strokeWidth={1.5}><path d="M4 6h16"/></svg>になるコンポーネントに変わります。あとはclassNameやstyleを...rest経由で渡すだけです。
対応範囲
コメントと処理命令は除去します。SVG内のscriptは要素として残りますがJSX下では実行されないため、自分で除去してください。不正なXMLは部分出力せず位置付きで拒否します。ペイロードを小さくしたい場合は先にSVG圧縮を使います。