question-mark
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.

SvgXml is missing "fill" (trying to migrate from react-native-svg-uri)

See original GitHub issue

Feature Request

If I haven’t missed anything, I don’t think that the fill override is implemented in <SvgXml>. I’m trying to migrate from react-native-svg-uri, which I think is the inspiration/fork-source for the shiny new SvgXml element in react-native-svg.

Why it is needed

I have a bunch of svgs in xml format, which I’m using as icons. I need the icons in different colors depending on the app styling and if the icon should be disabled/enabled.

Example svg:

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <g style="fill:#000">
      <path d="M472.916 224h-24.909a24.534 24.534 0 0 0-23.417-18H398v-65.024a6.86 6.86 0 0 0-3.346-6.062L207.077 26.572a6.927 6.927 0 0 0-6.962 0L12.48 134.914A6.981 6.981 0 0 0 9 140.976v216.685a7 7 0 0 0 3.5 6.062l187.654 108.342a7 7 0 0 0 3.5.938 7.361 7.361 0 0 0 3.6-.938L306 415.108v41.174A29.642 29.642 0 0 0 335.891 486h137.025A29.807 29.807 0 0 0 503 456.282v-202.1A30.2 30.2 0 0 0 472.916 224zm-48.077-4A10.161 10.161 0 0 1 435 230.161v.678A10.161 10.161 0 0 1 424.839 241h-40.678A10.161 10.161 0 0 1 374 230.839v-.678A10.161 10.161 0 0 1 384.161 220zM203.654 40.717l77.974 45.018-173.642 100.252-77.973-45.018zM197 453.878L23 353.619V153.085l174 100.259zm6.654-212.658l-81.668-47.151L295.628 93.818l81.672 47.151zM306 254.182v144.761l-95 54.935V253.344l173-100.259V206h.217a24.533 24.533 0 0 0-23.417 18h-24.909A30.037 30.037 0 0 0 306 254.182zm183 202.1A15.793 15.793 0 0 1 472.916 472H335.891A15.628 15.628 0 0 1 320 456.282v-202.1A16.022 16.022 0 0 1 335.891 238h25.182a23.944 23.944 0 0 0 23.144 17h40.373a23.942 23.942 0 0 0 23.143-17h25.183A16.186 16.186 0 0 1 489 254.182z"/>
      <path d="M343.949 325h7.327a7 7 0 1 0 0-14H351v-19h19.307a6.739 6.739 0 0 0 6.655 4.727 7.019 7.019 0 0 0 7.038-6.984v-4.71a7.093 7.093 0 0 0-7.076-7.033h-32.975a6.985 6.985 0 0 0-6.949 7.033v32.975a6.95 6.95 0 0 0 6.949 6.992zm.051 64h33a7 7 0 0 0 7-7v-33a7 7 0 0 0-7-7h-33a7 7 0 0 0-7 7v33a7 7 0 0 0 7 7zm7-33h19v19h-19zm.277 83H351v-19h18.929a7.037 7.037 0 0 0 14.071.014v-6.745a7.3 7.3 0 0 0-7.076-7.269h-32.975a7.191 7.191 0 0 0-6.949 7.269v32.975a6.752 6.752 0 0 0 6.949 6.756h7.328a7 7 0 1 0 0-14z"/>
      <path d="M393.041 286.592l-20.5 20.5-6.236-6.237a7 7 0 1 0-9.9 9.9l11.187 11.186a7 7 0 0 0 9.9 0l25.452-25.452a7 7 0 0 0-9.9-9.9zm0 129.249l-20.5 20.5-6.236-6.237a7 7 0 1 0-9.9 9.9l11.187 11.186a7 7 0 0 0 9.9 0l25.452-25.452a7 7 0 0 0-9.9-9.9zM464.857 295h-43.966a7 7 0 0 0 0 14h43.966a7 7 0 0 0 0-14zm0 64h-43.966a7 7 0 0 0 0 14h43.966a7 7 0 0 0 0-14zm0 64h-43.966a7 7 0 0 0 0 14h43.966a7 7 0 0 0 0-14z"/>
    </g>
  </svg>

Im using these XMLs like this with react-native-svg-uri:

<SvgUri
  width={this.props.size}
  height={this.props.size}
  svgXmlData={this.props.svg}
  fill={this.props.disabled ? 'lightgrey' : this.props.iconColor || 'black'}
/>

Doing the same thing with <SvgXml> will render the svg black instead of props.color:

<SvgXml
  width={this.props.size - PADDING}
  height={this.props.size - PADDING}
  xml={this.props.svg}
  fill={this.props.disabled ? 'lightgrey' : this.props.iconColor || 'black'}
/>

Is it planned?

If this is not a planned feature, I’ll go ahead with a simple replace in my xml string for the time being.

I know the format of my svg xml, so I can manage with a simple replace. But I suppose that a real solution should take into account other formats of the fill attribute?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7

github_iconTop GitHub Comments

3reactions
msandcommented, Oct 29, 2019

Currently, the props are forwarded to the root Svg element, but because you have a G element with the fill defined, all its ancestors will inherit their fill from it, instead of inheriting from the root Svg element.

1reaction
msandcommented, Oct 29, 2019

You can also use the color attribute on the Svg / SvgXml / SvgUri component, and then set fill or stroke to currentColor, and this will allow you to change the color of all those. So if you only need to set up to three different properties, stroke, fill and color, you can use just this. Otherwise, I would recommend creating a normal react / react-native-svg component, with more semantic props and normal data flow. Alternatively, you can define your own SvgXml / SvgUri component, where you do e.g. replace on the svg / xml string before processing.

Read more comments on GitHub >

github_iconTop Results From Across the Web

SvgXml is missing "fill" (trying to migrate from react-native-svg ...
I'm trying to migrate from react-native-svg-uri, which I think is the inspiration/fork-source for the shiny new SvgXml element in react-native- ...
Read more >
unable to implement local svg image in react-native app
Quick way to achieve is with the SvgXml component from react-native-svg. import {SvgXml} from 'react-native-svg';
Read more >
react-native-svg - npm
Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...). Easy to convert SVG code to react-native-svg.
Read more >
react-native-svg-uri - Bountysource
Hi, When i realize that i couldn't just use the SVG local and do the build i tried to use the svgXmlData to...
Read more >
import { svgXml } from "react-native-svg"; Code Example
js Attempted import error: 'Switch' is not exported from 'react-router-dom'. ./src/components/Header/HeaderElements.js [1] Module not found: Can ...
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