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

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?

[msand]

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.

[msand]

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.