Docs: No explanation on how to use <Image> with SVG files

[palminha]

What is the documentation issue?

No official documentation on how to use/configure nextjs to use SVG from local files.

Is there any context that might help us understand?

Since SVG is supported by <Image> and is referenced in the image component documentation page, there should be official documentation on how to support SVG files... maybe the image optimization could be a good place to document it: https://nextjs.org/docs/app/building-your-application/optimizing/images

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/building-your-application/optimizing/images

[Chukwu3meka]

It works quite the samge way as other image formats such as png, jpeg, etc. I have this in one project <Image src={/images/layouts/${variant}.svg} width={200} height={200} priority alt="Page not found" className="w-auto h-auto" />.

If you're referring to SVG config, here's a good place to start. You can as well go throught the full doc. Here is another discussion on SVG, you want to look at