using Next.js Image component is the best solution

@averydelusionalperson Thank you!

NP

Image optimisation is only applicable to raster images, so not applicable to svgs. So you don't need to use <Image> for it, <Image> will not do better than a <img>.

You have several options:
* use the svg directly as elements in the page (via svgr or similar approach)
* use <img>
* use techniques like svg sprites

@joulev which one would you recommend should I go with svgr

it really depends on the use case. for logos: use the svg directly as elements. for icons: svg sprites. for complex svg images: use <img>. but really, the differences are niche, and usually you can do well using one option for everywhere

@joulev I want to add icon svg inside buttons

then the <img> approach is not applicable because it's hard to style the svg.

the svg sprites technique is the best method, but it is not easy to set up. unless performance is very important to you, just use svgr or an icon library exporting icons as react component

The icons I want to use are not available in icon library where I use the most ‘lucide-react’ I should see to implement svgr

My Icons are from figma design because I’m developing an app so I will implement your logic

I would like to ask a second question here, is it worth converting the icon from svg format to png, or any other format that Next.js does optimize?

Would that be a good practise?

No, svg is objectively better than png if you are using it for icons. Please open up a new thread if you have a second question, ill be happy to help

No, bad practice. (1) The icons now have bigger file size (raster is always bigger than vector in this kind of thing). (2) They are no longer smooth, you just zoom in and they become pixelated. (3) They look horrible on a screen with higher dpi (e.g. Apple retina screens).

Just go to old Japanese websites, their buttons and icons are usually pngs. They look very, very bad.