SVG in React
https://www.w3.org/Icons/SVG/svg-logo-h.svg
モチベーション
svgはふつうxmlファイルとして記述する
Reactでimportしてコンポーネントとして使うなら、React Componentとしての記述が必要
ロゴの .svg ファイルと、それをReactコンポーネント化するための .jsx ファイルが両方とも必要になる
これを嫌って、svgをjsxに変換するライブラリが svgr .
svgr
input: HTML(svg), output: JSX(react component)
npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" icon.svg のように、CLIツールは用意されており、実行すると React ComponentのJSXが吐き出される
さらに、svgrは create-react-app に含まれていて、明示的に何も変換しなくても .svg ファイルをReact Copmonentで読み込める（んだと思う）
カスタマイズどうする問題
svgrでは特にカスタムpropsを所望の場所に入れることができない
<svg> タグ内のattributes = width, heightなどは受け渡し可能
他のpropsは <svg {...props} width={48} height={1}> される
カスタマイズが必要な場合は自分でReact Componentを書けばよさそう…？
TypeScriptでどうする問題
svgrは通常JSXに変換するので、TSXに変換したい時はカスタムテンプレートを書く必要がある
テンプレはたぶんここをどこかで上書きさせる