How to dynamically change color of SVG Images instead the app? about react-native-svg-transformer HOT 9 CLOSED

@steobrien Nice! Would you have time to contribute a change to the README with instructions on how to do that?

from react-native-svg-transformer.

Same Issue!

from react-native-svg-transformer.

Thanks @cylim ! I know that this is a highly requested feature.

The reasons why there is no way to do change the colors dynamically yet, are:

1. React Native's Metro packager/bundler does not seem to support any good way for the user to define a custom config to be passed to a library that is using a transformer (e.g. react-native-svg-transformer). I'm however considering doing the same thing that I did with the Sass transformer, which is to support a custom custom config in a less clean way: https://github.com/kristerkari/react-native-sass-transformer#sass-options
2. The transformer is using SVGR, and I would not like to add any custom attributes/properties to this library on top of the ones that SVGR provides.

I am of course open for any ideas of how to support changing the fill color in a clean way and without adding hacks to this library. If you can think of some, let me know.

from react-native-svg-transformer.

From https://www.smooth-code.com/open-source/svgr/docs/options/#replace-attribute-value

You can specify dynamic property using curly braces: { '#000': "{props.color}" } or --replace-attr-values #000={props.color}. It is particularly useful with a custom template.

Could that work? Are dynamic properties supported here?

from react-native-svg-transformer.

^ seems to work for me!

from react-native-svg-transformer.

@steobrien I would also greatly appreciate a little writeup on how to do it. I can make the readme change if you just want to respond here

from react-native-svg-transformer.

Sorry for opening an issues and didn't check it, I had open a PR with the solution provided by @steobrien.

from react-native-svg-transformer.

Excuse the delay – thanks for taking care of this @cylim!

from react-native-svg-transformer.

For me, the solution provided by @steobrien worked for react-native-web (directly using the svgr webpack loader), but not for the native platforms, where react-native-svg-transformer is internally using svgr. Does anyone have this working on web, iOS, and Android?

from react-native-svg-transformer.