Next.js Discord

Discord Forum

SVGR not working properly in nextJS 13.4.19

Unanswered
Canaan Dog posted this in #help-forum
Open in Discord
Canaan DogOP
Hello devs
I am trying to use svgr(8.1.0) as I am getting image (svg,png) url through api call that is stored on cloud. I am trying to render it through <Image /> component imported from next/image. Its working fine for png images but breaking for svg images.
<Image src={iconUrl} alt="icon" width={24} height={24} />
Workaround :
I have added configurations in next.config.js specified in svgr official documentation (file is attached).
I tried to render svg by giving url of svg that is in public folder and it is working but only svg url getting from api is not working. I have already verified that svg is also correct by downloading it using link getting from api response.
Any help would be appreciated

4 Replies

Gharial
I'm not exactly sure how SVGR works, but it's probably because Next's <Image> component expects images that has urls that are statically known at build time. Does it work if you use a normal img tag?
If so, you could even extrapolate to a dynamic image component, if you're going to be using it a lot. Something like:
const DynamicImage = ({ src, alt, width, height }) => {
  const isSVG = src.endsWith('.svg');

  return isSVG ? (
    <img src={src} alt={alt} width={width} height={height} />
  ) : (
    <Image src={src} alt={alt} width={width} height={height} />
  );
};

//then for your icon:
<DynamicImage src={iconUrl} alt="icon" width={24} height={24} />
Asian paper wasp
I am getting image (svg,png) url through api call that is stored on cloud
It has nothing to do with SVGR in this case.

The purpose of SVGR is to import SVGs as React components. Clearly that's not what you are doing right there.