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.

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.

• javascript
• next.js

• 1 In my case, adding @svgr/webpack and changing next.config.js is working fine both in dev server and production server. I didn't deploy the project, but running "next build" and "next start" is working fine as in "next dev" – anurag-dhamala Commented Nov 29, 2022 at 9:47
• @anurag-dhamala sure, it works fine for me as well, but I wasn't going to use them as components, but as src. Anyway, it serves the purpose so I'll go with that solution. Thank you. – Animus Commented Nov 29, 2022 at 10:45
• Check out the answer below. Turns out that we need to use Image from next/image. Thanks – anurag-dhamala Commented Nov 29, 2022 at 11:05
• You can use @svgr/webpack to import the SVG as a data URL too. See Getting NextJS Image Component & @svgr/webpack to play nicely together. – juliomalves Commented Dec 11, 2022 at 17:41
• I am not sure if anyone could relate to that but after configuring "svgr/webpack" i still had errors that loader is not configured. I couldn't import inline svg and I was really confused. Finally it appeared that I had 'use client' missing at the top of file which solve the issue. – Justyna Skrajna Commented Oct 19, 2023 at 20:25

3 Answers 3

@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 !

You can use SVGR Playground to convert the svg to a React Component. This way you can import it and use it like any other React Component. And if you want to change the color of the svg you can change the fill in the svg component to currentColor and remove the rest of the fill attributes, then you can style it using style or for example using tailwind. You can also change the dimensions of the svg by passing width and height through props but sometimes it doesn't scale the svg as it should or it doesn't scale it at all.

//Simply create a component and place the svg code inside return and remove xml, style and fill attributes from svg.

let InstaIcon = () => {
  return (
    <svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 90 90">
      <path
        id="Path_947"
        d="M5.06,44.96c0-7.72-0.1-15.44,0.04-23.15c0.11-5.04,2.51-9.76,6.53-12.82
    C14.68,6.41,18.56,5,22.56,5.02c15.09,0,30.18-0.08,45.27,0.06c6.21,0.02,11.91,3.45,14.84,8.94c1.6,2.73,2.41,5.85,2.33,9.01
    c0,14.67-0.07,29.3,0,43.96c0.03,8.56-5.97,15.95-14.35,17.69c-1.29,0.24-2.6,0.34-3.91,0.31c-14.49,0-28.99-0.05-43.49,0.04
    c-8.63,0.1-16.13-5.89-17.92-14.33C5.08,69.35,4.97,67.98,5,66.61c0-7.22,0-14.43,0-21.65H5.06 M44.94,70.86
    c14.29,0.03,25.91-11.52,25.94-25.82c0.03-14.29-11.53-25.91-25.82-25.94S19.15,30.63,19.12,44.92c0,0.07,0,0.14,0,0.21
    C19.22,59.34,30.74,70.81,44.94,70.86 M76.9,18.33c0.07-2.95-2.27-5.39-5.21-5.45c-0.07,0-0.14,0-0.21,0
    c-3-0.03-5.46,2.38-5.49,5.38c0,0.05,0,0.09,0,0.14c0.08,2.97,2.48,5.36,5.46,5.41C74.46,23.79,76.9,21.34,76.9,18.33 M44.97,59.66
    c-8.1-0.03-14.65-6.62-14.62-14.72s6.62-14.65,14.72-14.62s14.64,6.61,14.62,14.7C59.64,53.11,53.07,59.64,44.97,59.66"
      />
    </svg>
  );
};

export default InstaIcon;