React Native で開発しているアプリで SVG 画像を表示しようとしたとき、<Image /> ではダメだったので備忘録としてまとめ。
タイトルにあるとおり、SVG ファイルを表示させるには「react-native-svg-uri」ライブラリをインストールする必要があります。
GitHub のページはこちらから。
GitHub – vault-development/react-native-svg-uri: Render SVG images in React Native from an URL or static file
https://github.com/vault-development/react-native-svg-uri
まずはライブラリをインストールします。
npm install react-native-svg react-native-svg-uri --save
上記サイトでは、react-native-svg-uri のみインストールしていましたが、ライブラリの中身を確認したところ、react-native-svg も必要だったので一緒にインストールします。
iOS の場合は、上記コマンドの実行が完了したら pod install を下記のコマンドで実行してください。
npx pod-install
事前準備はこれで完了です。
あとは、下記のようにライブラリをインポートして、表示したい SVG ファイルを指定するだけです。
import SvgUri from 'react-native-svg-uri';
// ローカルにある場合
<SvgUri width="200" height="200" source={ require('[表示したいSVGファイルのパス]') } />
// サーバ上にある場合
<SvgUri width="200" height="200" source={{ uri: '[表示したいSVGファイルのパス]' }} />
サンプルコードは下記のとおりです。
なお、SVG 画像の色を変える場合は、Props の fill を使います。
こちらに色コードで色を指定すると、SVG 画像がその色で塗り潰されます。
色の変更が簡単にできるのは良いですね！
Web で SVG ファイルを扱ったとき、色の変更に手こずった記憶があるのですが、このライブラリでは簡単でした！
以上、React Native で SVG ファイルを表示するためのライブラリ「react-native-svg-uri」のご紹介でした。
ご参考になれば幸いです。
