Can't import SVG into Next.js

Question

When I try to import SVG Image then the following error shows. Which loader I have to use for importing SVG images?

./static/Rolling-1s-200px.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><filter id="b"><feGaussianBlur stdDeviation="12" /></filter><path fill="#817c70" d="M0 0h2000v2000H0z"/><g filter="url(#b)" transform="translate(4 4) scale(7.8125)" fill-opacity=".5"><ellipse fill="#000210" rx="1" ry="1" transform="matrix(50.41098 -3.7951 11.14787 148.07886 107 194.6)"/><ellipse fill="#eee3bb" rx="1" ry="1" transform="matrix(-56.38179 17.684 -24.48514 -78.06584 205 110.1)"/><ellipse fill="#fff4bd" rx="1" ry="1" transform="matrix(35.40604 -5.49219 14.85017 95.73337 16.4 123.6)"/><ellipse fill="#79c7db" cx="21" cy="39" rx="65" ry="65"/><ellipse fill="#0c1320" cx="117" cy="38" rx="34" ry="47"/><ellipse fill="#5cb0cd" rx="1" ry="1" transform="matrix(-39.46201 77.24476 -54.56092 -27.87353 219.2 7.9)"/><path fill="#e57339" d="M271 159l-123-16 43 128z"/><ellipse fill="#47332f" cx="214" cy="237" rx="242" ry="19"/></g></svg>

Solution 1

You need to provide a webpack loader that will handle SVG imports, one of the famous one is svgr.

In order to configure it to work with next, you need to add to your next.config.js file the usage of the loader, like that:

// next.config.js
    
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
       // for webpack 5 use
       // { and: [/\.(js|ts)x?$/] }
      },
      
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

For more config info, check out the docs.

Don't forget to install @svgr/webpack first:

$ npm install --save-dev @svgr/webpack

Edit

I've added an issuer section which strict these svg as component only for svgs that are imported from js / ts files. This allows you to configure other behaviour for svgs that are imported from other file types (such as .css)

Solution 2

Install next-images.

yarn add -D next-images

Create a next.config.js in your project

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

Solution 3

The quick way: <img> or <Image>

Not suitable for interactive SVGs or if you intend to manipulate a SVG by external CSS/JS

One can use the official next/image component or img tag (as mentioned in this answer).

You just need to move your svg file to public instead of static, and do something like this:

import Image from 'next/image';

// ...

<Image src="/Rolling-1s-200px.svg" width="2000" height="2000" />

But by using this method, the content of svg file will not be present directly in the response; the browser will get an <img src="..." ...></img> tag.

Also one needs to specify width and height, but you can calculate it from the viewbox attribute.

On Next.js v11 and above, you can also do:

import Image from 'next/image';

import Illustration from '../static/Rolling-1s-200px.svg';

// ...

<Image src={Illustration} />

// one needs to use `Illustration.src` to get the source URL
// <img src={Illustration.src} ... />

---

Including SVG inside HTML (for webpack-5, TS)

The accepted answer has shown how to do this with webpack-4, but since webpack-5 is now default, I'm sharing the appropriate config. You can use it after installing @svgr/webpack (yarn add -D @svgr/webpack or npm install @svgr/webpack --save-dev):

// next.config.js
// https://github.com/gregberge/svgr/issues/551#issuecomment-839772396

module.exports = {
  // other configs...

  // future: { webpack5: true }, // -- not needed since Next.js v11.0.0
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: { and: [/\.(js|ts|md)x?$/] },
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            prettier: false,
            svgo: true,
            svgoConfig: { plugins: [{ removeViewBox: false }] },
            titleProp: true,
          },
        },
      ],
    });
    return config;
  },
};

If you are not using options for the loader, then you can simply write this:

use: ['@svgr/webpack']

If you are using v6 of @svgr/webpack then you need to specify SVGO config like this:

// ...

plugins: [
  {
    name: 'preset-default',
    params: {
      overrides: { removeViewBox: false },
    },
  },
],

// ...

If using typescript, you need to define proper modules (in the directory from where you are importing svg, or maybe add it at root as <some-name>.d.ts and include it tsconfig):

// index.d.ts

declare module '*.svg' {
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

Then you may use it like:

import Illustration from '../static/Rolling-1s-200px.svg';

// ...

<Illustration />

Note: Next.js v11.0.1+ have declared SVGs as modules exporting any. Your custom configuration will not override the types set by next-env.d.ts unless you exclude the latter. Please refer this.

[OUTDATED (Fixed)] UPDATE :

If you are using Next.js v11.0.0, then you might be getting errors while importing SVGs. Please update to v11.0.1 or above. Please follow the workaround mentioned in this comment.

Solution 4

I personally prefer next-react-svg plugin which allows to treat SVG images as React components and automatically inline them, similar to what Create React App does.

Here is how to use it:

1. Install next-react-svg:

npm i next-react-svg

2. Add necessary settings to next.config.js:

const withReactSvg = require('next-react-svg')
const path = require('path')

module.exports = withReactSvg({
  include: path.resolve(__dirname, 'src/assets/svg'),
  webpack(config, options) {
    return config
  }
})

The include parameter is compulsory and it points to your SVG image folder.

If you already have any plugins enabled for your Next.js, consider using next-compose-plugins to properly combine them.

3. Import your SVGs as ordinary React components:

import Logo from 'assets/svg/Logo.svg';

export default () => (
  <Logo />
);

That's it. From now on, Next.js will be including SVG images imported this way into the rendered markup as SVG tags.

Solution 5

You can use babel-plugin-inline-react-svg

import React from 'react';
import CloseSVG from './close.svg';

const MyComponent = () => <CloseSVG />;

npm install --save-dev babel-plugin-inline-react-svg

// .babelrc
{
  "plugins": [
    "inline-react-svg"
  ]
}

Or see the link for more instructions.

View more solutions