はじめに
React Nativeでは、htmlのようにsvgファイルを素の状態で利用することができません。
react-native-svgというライブラリを使用する必要があり、React Nativeで扱えるように変換する必要があります。
変換にはいくつか方法がありますが、下記のような種類があります。
- react-native-svg-transformerでsvgファイルをそのまま使う
- CLI - @svgr/cliでコンポーネントファイルに変換
- GUI - SVG Playgroundでコンポーネントファイルに変換
- 最初からreact-native-svgで書く
各方法のメリット・デメリット
react-native-svg-transformerでsvgファイルをそのまま使う
svgファイルを直接importする方法です。
大量のsvgファイルを扱う場合に、設定を書くだけで利用できます。
- メリット
- 変換の手順を踏まず、svgファイルを直接読み込める。
- 設定を書けば、propsによるfillやstrokeの色指定等可能
- デメリット
- svgファイルの構成が統一されていない場合、設定での調整が難しい
- TypeScriptを使用する場合、declarationが必要
CLI - @svgr/cliでコンポーネントファイルに変換
svgファイルをCLIでreact-native-svgに変換したファイルをimportする方法です。
変換後のファイルがどうなっているか確認が容易です。
- メリット
- 変換後のファイルを確認、調整可能
- 設定を書けば、propsによるfillやstrokeの色指定等可能
- デメリット
- オプションが一部しかconfigファイルに書けないため、細かい設定、調整をしたい場合にコマンドが長くなりがち
- svgファイルの構成が統一されていない場合、設定での調整が難しい
GUI - SVG Playgroundでコンポーネントファイルに変換
GUIでsvgファイルを変換、調整可能な方法です。
ローカルのsvgファイルをドラッグアンドドロップして読み込めます。
- メリット
- 各ファイルに対して個別の設定、調整が可能
- CLIや細かい設定での調整が苦手でも扱いやすい
- デメリット
- 一つひとつのファイルに対して手動変換を行うので、svgファイルの数が増えれば増えるほどしんどい
最初からreact-native-svgで書く
通常、svgエディタを使用してsvgを作成、その後React Native用に変換という手順をすっ飛ばし、コードで書いちゃうマンの方法です。
自作のグラフを作成する場合などに有効な方法です。
- メリット
- svgファイルとはなんだったのか
- デメリット
- しんどい。しんどくない？
さいごに
react-native-svgではまだサポートされていないsvgの機能があります。
変換後の見え方に違和感がある場合は、cliやguiで変換するとサポートされていない機能についてコメントされるので確認してみてください。
他にも良い方法やおかしな点がある場合には、コメント頂けるとありがたいです。