CODEWITHSUNDEEP
javascriptnext.js
Animus
Animus

Reputation: 853

How to use SVG in NextJS 13 with app directory?

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.

Upvotes: 14

Views: 38681

Answers (3)

Vladan Mikic
Vladan Mikic

Reputation: 103

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.

Upvotes: 1

Arunprasanth M
Arunprasanth M

Reputation: 71

//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;

Upvotes: -6

anurag-dhamala
anurag-dhamala

Reputation: 709

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

Upvotes: 15

Related Questions