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.

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description, Steps to reproduce, Snack or a link to a repository, SVG version, React Native version and Platforms sections.

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[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?

[Rajat421]

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?

@bohdanprog If We are using any URL to download a svg, than can pass etag in request header to use it for more efficient caching

[rokkoo]

Hi @bohdanprog ! In hour case we want to change the user-agent header to keep the consistency with our custom fetcher, so we need to override the header.