Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[QUESTION] Is it possible to change "fill" property of a "Path" inside?

See original GitHub issue

Hi. I was wondering if it’d be possible to change “fill” property of a svg. I have the following svg:

<svg xmlns="http://www.w3.org/2000/svg" width="24.431" height="24.431" viewBox="0 0 24.431 24.431">
  <g id="backspace" opacity="0.3">
    <path id="path" d="M0,0H24.431V24.431H0Z" fill="none"/>
    <path id="path-2" data-name="path" d="M22.4,3H7.126a1.916,1.916,0,0,0-1.619.9L0,12.162l5.507,8.256a1.925,1.925,0,0,0,1.619.906H22.4a2.042,2.042,0,0,0,2.036-2.036V5.036A2.042,2.042,0,0,0,22.4,3ZM19.341,15.816l-1.435,1.435L14.251,13.6,10.6,17.251,9.162,15.816l3.654-3.654L9.162,8.507,10.6,7.072l3.654,3.654,3.654-3.654,1.435,1.435-3.654,3.654Z" transform="translate(0 0.054)" fill="#CCC"/>
  </g>
</svg>

I’ve imported this svg and changed its width and height:

import Backspace from '../../../Customization/assets/backspace.svg';

<Backspace width='39' height='39' />

Is it possible to change the “fill” property of the “path” with id=“path-2” without changing svg file?

Thank you.

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:29 (12 by maintainers)

Top GitHub Comments

4reactions

kristerkaricommented, Oct 8, 2019

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.

3reactions

inferusvvcommented, Sep 21, 2019

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>