Used svgXmlData but my SVG shows black color

[bmoreira10]

Hi,
When i realize that i couldn't just use the SVG local and do the build i tried to use the svgXmlData to make it work and it shows the image but all black and i try to change the color but i couldn't.

<SvgUri fill="#474A4D" width="24" height="24" svgXmlData={'<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg style="enable-background:new 0 0 47.001 47.001" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="512px" viewBox="0 0 47.001 47.001" width="512px" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1_64_"><g fill="#474A4D"><path d="m22.4 22.4c0 0.591 0.479 1.07 1.07 1.07s1.07-0.479 1.07-1.07c0.001-1.25 0.445-2.46 1.25-3.42 1.79-2.13 3.14-4.43 3.99-6.85 0.115-0.327 0.065-0.689-0.135-0.972-0.201-0.283-0.525-0.451-0.872-0.451h-10.6c-0.347 0-0.672 0.168-0.873 0.451-0.2 0.283-0.25 0.645-0.135 0.972 0.853 2.42 2.2 4.72 3.99 6.85 0.8 1 1.2 2.2 1.2 3.4z"/><path d="m24.6 26.7c0-0.59-0.479-1.07-1.07-1.07s-1.07 0.479-1.07 1.07c-0.001 1.54-0.922 3.07-2.59 4.3-3.57 2.64-6.25 5.51-7.95 8.52-0.187 0.332-0.184 0.736 0.009 1.06 0.19 0.329 0.542 0.53 0.922 0.53h21.4c0.379 0 0.73-0.201 0.922-0.53 0.191-0.326 0.194-0.73 0.008-1.06-1.7-3.01-4.38-5.88-7.95-8.52-1.5-1.2-2.4-2.7-2.4-4.3z"/><path d="m42.2 42.7h-0.639c-0.734-8.31-5.6-14.7-9.39-19.2 3.78-4.53 8.65-10.9 9.39-19.2h0.639c1.18 0 2.14-0.957 2.14-2.14 0-1.2-0.9-2.16-2.1-2.16h-37.4c-1.18 0-2.14 0.957-2.14 2.14s0.956 2.14 2.14 2.14h0.639c0.735 8.31 5.6 14.7 9.39 19.2-3.78 4.53-8.65 10.9-9.39 19.2h-0.6c-1.18 0-2.14 0.955-2.14 2.14s0.956 2.14 2.14 2.14h37.4c1.18 0 2.14-0.957 2.14-2.14 0-1.1-0.9-2.1-2.1-2.1zm-32.5 0c0.803-7.51 5.69-13.3 9.34-17.6l0.195-0.231c0.672-0.795 0.672-1.96 0-2.76l-0.194-0.23c-3.65-4.32-8.53-10.1-9.34-17.6h27.5c-0.803 7.51-5.69 13.3-9.34 17.6l-0.193 0.23c-0.672 0.795-0.672 1.96 0 2.76l0.195 0.231c3.65 4.32 8.53 10.1 9.33 17.6h-27.6z"/></g></g></svg>'}/>

[vendramini]

same here, +1.

[lizhiren2016]

同样在这里，+1。

[JKonTiki]

+1

[MatthieuPeyrot]

+1

[tastycode]

same here +1

[tastycode]

I had this same problem rendering these SVG elements

	<polygon fill="#FFFFFF" points="93.754,107.467 130.666,134.66 117.678,73.56 	"/>
	<polygon fill="#FF00FF" points="75.065,134.046 53.631,121.082 30.119,162.249 127.597,141.529 89.373,113.485 	"/>

Switching from polygon to polyline (Just change the tag name) fixed it. Seems that we're running into trouble rendering the fill on polygon elements.

[yudai524]

Same problem had been occured in the following environment.
react-native 0.48.1
react-native-svg-uri 1.2.1

[zivchen]

+1
any answers guys? any alternatives for a large number of svg icons in the app?

[AzrizHaziq]

+1

[bahaeddine4]

+1

[zhaonian]

+1

[Naveen671]

+1

[yogeshR5]

+1

[solonifer]

+1

[Lidanha]

+1

[pilot4u]

+1

[donni106]

I think in the example of @bmoreira10 the fill color is missing in the <path.... Try it with removing the fill from the outer wrapper and just add it in <path.