SvgUri with Color

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.

[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}
/>

[bisk8s]

I’ve used this workaround for my icons:

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