SvgUri with Color

[onebrunoo]

How to set the color of svg loaded from url?

<SvgUri width="80%" height="80%" uri="https://unpkg.com/ionicons@5.0.0/dist/svg/person-outline.svg" color="red" fill="red" />

the snippet is not changing color.

Thank you.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[FullstackJack]

Same issue here.

[sujatha2016]

any solution to this ??
I tried color fill stroke. nothing changed.
verision 11.0.1

[bisk8s]

Same here.
I understood that 'color' and 'fill' props intended to override all 'fill' and 'color' attributes on file.
That would be great to have a way to inject our own CSS too. (Insert That-Would-Be-Great-meme.jpg)

[bisk8s]

I've used this workaround for my icons:

<SvgXml width={45} height={45} xml={xml.replace(/black/g, 'red')} />

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[midorimici]

Using SvgXml works for me too!
To change SvgUri to SvgXml, I simply used fetch like this.
I give a closed tag to the useState, that otherwise Unexpected end of input error occurs.

const [imgXml, setImgXml] = useState('<svg></svg>');

useEffect(() => {
  getImgXml();
}, []);

const getImgXml = async () => {
  const url = await getURL();
  const xml = await (await fetch(url)).text();
  setImgXml(xml);
};

<SvgXml
  xml={imgXml
    .replace(/fill="#[0-9a-f]{6}"/g, `fill="${props.fill}"`)
    .replace(/stroke="#[0-9a-f]{6}"/g, `stroke="${props.stroke}"`)}
  width={pieceSize}
  height={pieceSize}
/>

[marklanham]

@midorimici This works well thank you! I just had to tweak the RegEx to this: (["'])(?:(?=(\\?))\2.)*?\1

So my markup is now like this:

<SvgXml
  xml={imgXml
    .replace(/fill=(["'])(?:(?=(\\?))\2.)*?\1/g, `fill="${colors.iconFillColor}"`)
    .replace(/stroke=(["'])(?:(?=(\\?))\2.)*?\1/g, `stroke="${colors.iconStrokeColor}"`)}
  width="24"
  height="24"
/>