昨日の記事で、React Native のアプリに SVG 画像を表示する方法についてご紹介しましたが、今回はその表示した画像を塗りつぶす色を変更する方法についてです。
と言っても色の変更方法は簡単で、fill に変更したい色を指定するだけです。
サンプルコードは下記のとおりです。
まず、表示したい画像を下記のように取得します。
import { SvgCssUri } from 'react-native-svg';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
const file = require('[SVG ファイルのパス]');
const svg = resolveAssetSource(file);
あとは下記のように記述すれば、画像が表示されます。
<SvgCssUri uri={svg.uri} width="100%" height="100%" fill='[変更したい色]' />
で、この時に fill で画像を塗りつぶしたい色を指定すればOKです。
しかし、私の環境では上記のように指定しても色が変わらず…。
で、表示している SVG 画像のソースを確認したところ、fill で直接色が指定されていたのが原因でした。
そのため、SVG ファイルのソースから、fill の設定値をごっそり削除した後、再度アプリを実行したところ、無事に色が変更できました！
色が変わらない原因が画像ファイルにある事に早めに気がつけて良かったです…！
以上、React Native の「react-native-svg」ライブラリを使って表示した SVG 画像の塗りつぶしの色を変更する方法についてでした。
ご参考になれば幸いです。
