React Native - how to use local SVG file (and color it)

Question

I have some .svg icons locally that I'd like to use in my RN project.

An example is an .svg icon like this (opened in Chrome):

I'd like to display this file (as well as having control in specifying fill color for it) -- is there any way to do this in React Native?

(i've tried 'react-native-remote-svg' component but that doesn't give me any control over coloring)

Thanks!

Answer 1

You can use react-native-svg-transformer to import svgs in to your code. Once you've set that up, you'll be able to do:

import ProfileIcon from './images/profile.svg'

You can then use ProfileIcon as a component.

To control the colour, edit the svg file and change the fill or stroke attributes to "currentColor" (so <polygon fill="currentColor" ...>). You can then set the color style on your svg element and it'll use that colour: <ProfileIcon style={{ color: '#f80' }}/>

I'm using react-native-svg 9.3.5.