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

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.