3

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.

Animus
  • 665
  • 12
  • 24
  • 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 Nov 29 '22 at 09: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 Nov 29 '22 at 10:45
  • Check out the answer below. Turns out that we need to use Image from next/image. Thanks – anurag-dhamala Nov 29 '22 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](https://stackoverflow.com/a/66768451/1870780). – juliomalves Dec 11 '22 at 17:41

3 Answers3

2

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

anurag-dhamala
  • 524
  • 3
  • 10
  • It doesn't really help with the src, I've used both next/image and next/legacy/image. – Animus Nov 29 '22 at 21:00
  • Exactly what I was searching for. Bye, @svgr/webpack, embrace Turbopack – Adilet Soronov Apr 30 '23 at 15:49
  • Is there a way to make this work with currentColor? Even if I manually edit the fills in my SVG file to be currentColor I can’t get SVGs included through next/image to use the parent’s color – James May 02 '23 at 17:31
0

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.

Vladan Mikic
  • 63
  • 7
-1

//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;
Arunprasanth M
  • 29
  • 5