[QUESTION] Is it possible to change "fill" property of a "Path" inside? about react-native-svg-transformer HOT 29 OPEN

Is there anything else I can check?

Check that the SVG image that you are using has a fill color matching #000. You can also try restart your Metro packager with the --reset-cache flag.

from react-native-svg-transformer.

I am also don't see any effect of .svgrrc file. RN 0.60.5.

Icon took from font-awesome library. I changed fill property from currentColor to #000 then created .svgrrc with next content:

{
  "replaceAttrValues": {
    "#000": "{props.fill}"
  }
}

Here is icon:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="svg-inline--fa fa-star fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="#000" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>

from react-native-svg-transformer.

Hello,

Having the .svgrrc(.json) file with the content like this:

{ "replaceAttrValues": { "#FFFFFF": "{props.fill}" } }

doesn't work for me. All of the local .svg files have the white fills by default.

Is there any kind of configuration I need to run to enable that transforming. I'm using TypeScript in my project which requires running tsc -w to generate the .dist folder, and I'm not sure if that affects the transformation.

Could also confirm that @anfriis 's original solution works for my case, but only for the first time when you set the currentColor as props.color. After that, the currentColor won't change regardless of changing the props.color

from react-native-svg-transformer.

Is there anything else I can check?

Check that the SVG image that you are using has a fill color matching #000. You can also try restart your Metro packager with the --reset-cache flag.

This is the correct answer. after your add .svgrrc file to your project, you have to reset cache to first

from react-native-svg-transformer.

Thanks @LeonardoBurrone !

Currently that is not possible, but I'm open for ideas to make that possible.

One suggested solution is in this pull request:
#4

I'm however not that keen on adding it, because it requires another file to be used just to support the color change.

from react-native-svg-transformer.

New version is out that supports replacing a color inside the SVG images. It's a bit lacking, but at least you can try it out to see if works for you project. More info can be found in the README.

https://github.com/kristerkari/react-native-svg-transformer/releases/tag/0.13.0

from react-native-svg-transformer.

I was able to change fill color for a path in my .svg file like this:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="18px" viewBox="0 0 22 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: sketchtool 56.3 (101010) - https://sketch.com -->
    <title>1CDD7CD2-1911-4E27-89F6-1157A9B22CC4</title>
    <desc>Created with sketchtool.</desc>
    <g id="EXPORT" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(...)">
            <g id="idHere" transform="translate(...)">
                <path fill="currentColor" d="M20.8421053,...." id="Fill-1"></path>
            </g>
        </g>
    </g>
</svg>

Notice the currentColor keyword set in the path.
I could then use it like this by setting color prop:

import Icon from '../../assets/svg/icon.svg'
...
<Icon width={18} height={18} color={(Platform.OS == 'ios') ? processColor('yellow') : 'yellow'} />

I had to figure this out from a StackOverflow post, so could this info be added to the README @kristerkari ?

from react-native-svg-transformer.

@anfriis Don't use color as the React property name, use for example fill like in the README.

from react-native-svg-transformer.

@kristerkari If I use fill instead of color the color is defaulting to blue - the same as not setting anything, so it doesn't work.
I have indeed looked a lot in the README, but this was the only way I can make it work

from react-native-svg-transformer.

@anfriis Please verify that you have also changed the prop name from SVGR's config. At least last time that I tried it, it was working just fine.

from react-native-svg-transformer.

@kristerkari I am not using an .svgrrc file to change the prop name, if that is what you mean. I tried with one at some point but couldn't make it work.

from react-native-svg-transformer.

The runtime color replacement does not work without the .svgrrc. You need to have it.

from react-native-svg-transformer.

I just created an example project to see if I had some color configuration in my project that was doing the replacement, but it works indeed the same way as I described.
The example project uses RN 0.60.5, react-native-svg 9.8.4, and react-native-svg-transformer.
See App.tsx and star.svg: Using currentColor in the svg file, and color prop in the component works just fine. Using fill prop instead doesn't work.

svgtest.zip

from react-native-svg-transformer.

Using fill prop instead doesn't work.

It does not work because you don't have .svgrrc in your project. I just tested with your example, and fill as the property works fine if you add this:

{
  "replaceAttrValues": {
    "currentColor": "{props.fill}"
  }
}

from react-native-svg-transformer.

Okay cool, but is there a problem in using color prop instead and avoiding the need for the .svgrrc file?
It will not work if I have multiple layers I want to set color for in the same SVG file, but I don't need that at the moment

from react-native-svg-transformer.

is there a problem in using color prop instead and avoiding the need for the .svgrrc file?

Not at all, you can use whatever you want. I just personally think that doing it with the .svgrrc is a cleaner way.

from react-native-svg-transformer.

All right, thanks for clarification 👍

from react-native-svg-transformer.

@stahamnguyen Hmm.. I don't know why it does not work in your case, but I can have a look if you are able to upload your project somewhere.

Is there a reason why you are using tsc to compile your Typescript, and not the default Babel version that React Native has built-in?

from react-native-svg-transformer.

I am also having troubles with this, in my package.json:

"svgr": {
    "replaceAttrValues": {
      "#000": "#AAA"
    }
  }

I used #AAA just for testing. This has no effect. The same if I place it in a .svrrc-file

from react-native-svg-transformer.

Hello @inferusvv and @Alenius :)

I just tested the examples from both of you in the example project and they were working fine, so please check that you have everything installed correctly.

Here's the example project that I use for testing things:
https://github.com/kristerkari/react-native-svg-example

from react-native-svg-transformer.

Hello again!

I have checked my versions and i have:

    "react-native": "0.60.5",
    "react-native-svg": "^9.11.1",
    "react-native-svg-transformer": "^0.13.0",

I litterally copied your metro.config from the example you provided. Is there anything else I can check?

from react-native-svg-transformer.

I can change the fill on Android, but not iOS

I entered the following for my .svgrrc file:

{
  "replaceAttrValues": {
    "#242021": "{props.fill}"
  }
}

And it has no affect on either of them. Android lets me change the fill value without any config, iOS doesn't let me change it no matter what config I have.

react-native: 0.61.2
react-native-svg: 9.13.3
react-native-svg-transformer: 0.14.2

My only solution is directly changing the fill value on the .svg file from #242021 to none.``

from react-native-svg-transformer.

@mikeislearning Could you please paste here the svg image that you are using? Can you also test your thing with react-native-svg-transformer 0.13.0?

from react-native-svg-transformer.

@mikeislearning Actually I just noticed that you are using version 0.14.2, could you please update to 0.14.3 that has fix for your problem.

from react-native-svg-transformer.

I updated to 0.14.3 and now everything works properly!
Thank you so much for the quick fix and response @kristerkari

from react-native-svg-transformer.

Is there anything else I can check?

Check that the SVG image that you are using has a fill color matching #000. You can also try restart your Metro packager with the --reset-cache flag.

This is the correct answer. after your add .svgrrc file to your project, you have to reset cache to first

I had the same problem while using version 0.14.3 and for me clearing the cache was the solution.

Just to make things clear, this is the command I used npm start -- --reset-cache.

Thanks all for the help and the suggestions.

from react-native-svg-transformer.

Is there anything else I can check?

Check that the SVG image that you are using has a fill color matching #000. You can also try restart your Metro packager with the --reset-cache flag.

This is the correct answer. after your add .svgrrc file to your project, you have to reset cache to first

Yep that did it for me too... had to run --reset-cache first and then run-android again and it worked :)

from react-native-svg-transformer.

Hey People, in my case dot not work on any platform (Android, iOS). Im using Expo. this is my .svgrrc

{
  "replaceAttrValues": {
    "primaryColor": "#2196F3",
    "success":"#007e33",
    "grey": "#BDBDBD",
    "danger": "#cc0000",
    "caution":"#ff8800",
    "white": "#fff",
    "black": "#000",
  }
}

i have these dependencies:

 "expo": "~37.0.3",
 "react-native-svg": "11.0.1"
 "react-native-svg-transformer": "^0.14.3",

if anybody could help me, it will be Awesome !! THanks

Update:

It works when i use props on .svgrrc call it currentColor ( also you must see in svg thats have the same props name).

{
  "replaceAttrValues": {
    "currentColor": "{props.fill}"
  }
}

from react-native-svg-transformer.

Hello!
I have a question. Is it possible to change the color if it is set for group in svg? Or does it only work for the props set in path?

from react-native-svg-transformer.