use svg image in next js

To use an SVG image in Next.js, you can follow these steps:

1. Create a new file in the "public" directory of your Next.js project, for example, "icon.svg".

2. Open the SVG file and make sure it contains the SVG markup for the image.

3. In your Next.js component where you want to use the SVG image, you can import it using the following code:

import Image from 'next/image';

1. Then, you can use the imported SVG image in your component like this:

<Image src="/icon.svg" alt="icon" width={100} height={100} />

1. After importing the SVG image, Next.js will optimize it automatically and serve it from the "/_next" folder.

2. Finally, when the component is rendered, the SVG image will be displayed on the page as expected.