fill prop not working for svg file!

Hey! @kristerkari I was looking for a way to change the color of the svg icon ( just like in #4 ). Going through the docs, so far I’ve tried this:

Imported the svg file in the project. import Shop from '../Components/Assets/shop.svg';

Used the svg file. <Shop width={'100%'} height={'30%'} fill={'red'} />

Created a .svgrrc (no extension) file in the root of the project containing:

{
  "replaceAttrValues": {
    "#748A9D": "{props.fill}"
  }
}

My project dependencies: “react-native”: “0.63.2”, “react-native-svg”: “^12.1.0”, “react-native-svg-transformer”: “^0.14.3”, “semver”: “^7.3.2” “@svgr/core”: “^5.4.0”, “path-dirname”: “^1.0.2”,

Am I missing something?

[mhammerc]

@KPS250 I exported my SVG from Figma and it set the property fill inside the <svg> to none.

<svg fill="none">

When that happen, every <path> (which are inside <svg>) are not getting colored, even if they are <path fill="#000000">.

To fix the issue, I had to change fill="none" to fill="#000000" from the <svg> element.

TLDR Ensure <svg> elements have fill="#000000" and nothing else

[emirhankolver]

@KPS250 I exported my SVG from Figma and it set the property fill inside the <svg> to none.

<svg fill="none">

When that happen, every <path> (which are inside <svg>) are not getting colored, even if they are <path fill="#000000">.

To fix the issue, I had to change fill="none" to fill="#000000" from the <svg> element.

TLDR Ensure <svg> elements have fill="#000000" and nothing else

Also I fixed my problem by removing fill=“white” in the <path></path> line and changing the <svg fill="none"> to <svg fill="#000000"> also I restarted the react-native server and actual app

Example: Old

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.775 9...." fill="white"/>
</svg>

New

<svg width="24" height="24" viewBox="0 0 24 24" fill="#000000" xmlns="http://www.w3.org/2000/svg">
<path d="M17.775 9...."/>
</svg>