How to use SVG in NextJS 13 with app directory?

Question

I've decided to give a try to app directory and a lot of things got broken. For example, the image import. The pngs work just fine, but importing an SVG image makes it broken in /app.

For example, this particular URL works just fin with /pages and doesn't work with /app:

import Logo from 'public/company.svg';

The imported image object(from inside the component) looks as follows in console:

{
  src: '/_next/static/media/company.99a082b8.svg',
  height: 32,
  width: 162
}

The file itself is absent in /media folder.

How can I import the SVG image into NextJS 13+ project?

Update:

I've added SVGR to import SVGs as components and everything works normally, however it doesn't fix the build issue.

Answer 1

@svgr/webpack solves the issue, but to use svg images as src we've to use Image from next/image as below. <img/> tag didn't work.

import Image from "next/image";
import SVGIMG from "../public/vercel.svg";

export default function Page() {
    return (
       <Image src={SVGIMG} alt={""}/>
    )
}

Works in next dev and next build && next start !