Add HTTP headers to <SvgUri>

[pke]

Feature Request

It would be nice to be able to specify HTTP headers for SvgUri.

Why it is needed

Sometimes the server could serve a different variant of the SVG file depending on client features like dark contrast or inverted colours.

Possible implementation

It would just need on addition property headers which is modelled after the default ImageURISource prop.

Code sample

export type UriProps = { 
  uri: string | null;
  headers?: { [name:string]: string };
} & AdditionalProps;

export async function fetchText(uri: string, headers?: {[name:string]: string}) {
  const response = await fetch(uri, { headers });
  return await response.text();
}

export function SvgUri(props: UriProps) {
  const { onError = err, uri, headers } = props;
  const [xml, setXml] = useState<string | null>(null);
  useEffect(() => {
    uri
      ? fetchText(uri, headers)
          .then(setXml)
          .catch(onError)
      : setXml(null);
  }, [onError, uri, headers]);
  return <SvgXml xml={xml} override={props} />;
}

Worth a PR?

The caller would need to ensure that headers is stable, or it would cause unnecessary re-rerenders.

[pke]

Hey bot, its a feature request not a bug. The template looks totally different and I filled out everything.

[bohdanprog]

Hello @pke,
Could you provide an example of how it can be useful? For instance, it can be a private API for which we can give headers to authorize. Do you know if there is another example?