React-native-svg: change fill for svg files

[antonioreyna]

hello, how can i change the fill of the paths dinamically, i am importing svg files with svg-transformer.

[antonioreyna]

looks like the path needs to have they currentColor keyword in its fill and then use the property color in the svg file component

[eladgel]

@antonioreyna can you explain more or give an example, I have also encountered this issue

[boxdox]

Hey @eladgel,
In your svg files, change the fill of all paths to currentColor.
settings.svg:

<svg fill="none" xmlns="http://www.w3.org/2000/svg"><path d="...." fill="currentColor" /></svg>

Then when you import them in your component, pass your desired color in the color prop:

import SettingIcon from '../assets/icons/settings.svg';

<SettingIcon color="blue" width={36} height={36} />