fill prop not working for svg file!

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:23 (2 by maintainers)

github_iconTop GitHub Comments

48reactions
mhammerccommented, Nov 8, 2020

@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

32reactions
emirhankolvercommented, Feb 9, 2021

@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>
Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native - how to use local SVG file (and color it)
Solution: · Open the svg in editor as you can see in picture below · Remove all fill prop from paths only (Only...
Read more >
Fills and Strokes - SVG: Scalable Vector Graphics | MDN
Basic coloring can be done by setting two attributes on the node: fill and stroke . Using fill sets the color inside the...
Read more >
How to use SVG with Dynamic colors in React Native - Medium
Using Dynamic SVG fill colors. update SVGR config file ( .svgrrc ) in the project's root folder. (create the file if it does...
Read more >
How to import SVG files in React Native using react-native-svg
This is because there isn't a built-in React Native component ... Finally, the fill prop indicates the color of the rendered SVG element....
Read more >
React SVG: How to use SVGs best in React - CopyCat Blog
The file extension of an SVG image is .svg and they do not lose quality when zoomed or resized, making them more efficient...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found