株式会社シーポイントラボ | 浜松のシステム・RTK-GNSS開発

【React Native】アプリでSVG画像を表示するためのライブラリ「react-native-svg-uri」

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 画像の色を変える場合は、Propsfill を使います。
こちらに色コードで色を指定すると、SVG 画像がその色で塗り潰されます。
色の変更が簡単にできるのは良いですね!
Web で SVG ファイルを扱ったとき、色の変更に手こずった記憶があるのですが、このライブラリでは簡単でした!

 

以上、React Native で SVG ファイルを表示するためのライブラリ「react-native-svg-uri」のご紹介でした。
ご参考になれば幸いです。

  • この記事いいね! (1)
モバイルバージョンを終了