change svg color in js, but not work

[cieldon32]

import { View, processColor } from "react-native"
<Camera width={24} height={24} fill={'red'}/>
<Camera width={24} height={24} fill={processColor('red')}/>

they show not red

[josephbuchma]

#98 likely same issue

[Piero87]

I have the same problem, any solution for this?

[kristerkari]

@cieldon32 Which version of React Native and react-native-svg are you using? I can't really help out without more information.

[negrudev]

happens to me too:

"react-native": "^0.62.2",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",

Update: Solved. I could't apply the fill due to how the svg was set up (fill-rule="evenodd"). Deleted that from the svg, and everything worked fine.

[LeslieOA]

happens to me too:

"react-native": "^0.62.2",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",

Update: Solved. I could't apply the fill due to how the svg was set up (fill-rule="evenodd"). Deleted that from the svg, and everything worked fine.

I was having the exact same problem with:

"react-native": "0.63.0",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",

Removing fill-rule="evenodd" worked perfectly for me. Thanks @negrudev!

[kodagabriel]

happens to me too:

"react-native": "^0.62.2",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",

Update: Solved. I could't apply the fill due to how the svg was set up (fill-rule="evenodd"). Deleted that from the svg, and everything worked fine.

Removing fill-rule="evenodd" worked for me too! Thanks!

[antonioreyna]

how do you set the fill on the Camera svg file?

[saleempirwani]

I had got this issue in React Native.

Now, I have solved by removing default color fill="#your_color". In my case "fill" as a prop does not able to replace default color.

Before

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.6 24V15.5294H14.4V24H20.4V12.7059H24L12 0L0 12.7059H3.6V24H9.6Z" fill="#000"/>
</svg>

After

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.6 24V15.5294H14.4V24H20.4V12.7059H24L12 0L0 12.7059H3.6V24H9.6Z"/>
</svg>

Then I used as

import Logo from './logo.svg'
<Logo fill="#4caf50"/>

[rocrinioica]

Hi,
do you have tried to set fill="currentColor" and change the color with the color attribute?

<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M9.6 24V15.5294H14.4V24H20.4V12.7059H24L12 0L0 12.7059H3.6V24H9.6Z" fill="currentColor"/> </svg>

import Logo from './logo.svg' <Logo color="your_color"/>

[rgomezp]

@cieldon32 Which version of React Native and react-native-svg are you using? I can't really help out without more information.

Thanks for your work on this great plugin.

I'm unfortunately running into the same issue.

Dependencies:

• "react-native-svg": "13.9.0"
• "react-native-svg-transformer": "^1.1.0"
• "react": "18.2.0"
• "react-native": "^0.72.0"
• "expo": "^49.0.0",

.svgrrc

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

SVG examples:

Here is a case where the color is in the style prop. I've tried it as a prop as well but no luck.

<path
       style="display:inline;fill:#999999"
       d="m 162.75441,471.96382 c 0,0 -7.19092,7.43061 -9.34819,13.66274 -2.15728,6.23212 -4.31455,9.10849 -4.07486,16.5391 0.2397,7.43062 2.15728,23.96973 2.87637,32.59883 0.71909,8.6291 -1.19848,16.5391 0,22.29184 1.19849,5.75273 5.75273,2.15727 7.67031,-2.15728 1.91758,-4.31455 6.23213,-29.24306 7.67031,-33.79731 1.43819,-4.55424 7.43062,-25.1682 7.67031,-31.87973 0.2397,-6.71152 0.95879,-17.97729 -12.46425,-17.25819 z"
       id="path53"
       transform="matrix(-1.0093018,0,0,1,257.44455,-0.33898305)" />

Expo Specific Considerations

Is it possible this doesn't work on Expo without some extra steps? Expo has different dev environments so it's possible it may only work in some of them. Or even just release builds? I haven't tried as a release build myself but I suppose it's possible.

Edit: resolved

My solution was changing the declarations.d.ts to:

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "expo-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

This should be updated in the setup instructions.