无法将 SVG 导入 Next.js

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)

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()

This worked for me without any other dependency

// In next.config.js


module.exports = {
webpack (config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
});
return config;
}
};

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.

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.

You can simply import it via <img> tag.

<img src='./next.svg' alt='next' />

Just make sure that the svg is in public folder.

You can use next-plugin-svgr & next-compose-plugins to clean up plugins (if you have):

// next.config.js
const withPlugins = require("next-compose-plugins");
const withSvgr = require("next-svgr");
 

module.exports = withPlugins([
withSvgr
// your other plugins here
]);

or just next-plugin-svgr:

// next.config.js
const withSvgr = require('next-plugin-svgr');
 

module.exports = withSvgr({
webpack(config, options) {
return config;
},
});

Source: https://www.npmjs.com/package/next-plugin-svgr

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.

How to import SVG into Next.js component?

Another solution without install any library

import React from "react";
export default function GoogleLogo() {
return (
<svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
<g fill="none" fillRule="evenodd">
<path
d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
fill="#4285F4"
/>
<path
d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
fill="#34A853"
/>
<path
d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
fill="#FBBC05"
/>
<path
d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
fill="#EA4335"
/>
</g>
</svg>
);
}

and use:

import GoogleLogo from "./GoogleLogo";


class Login extends React.Component {
render() {
return (
<LoginLayout title="Login Page">
<div>
<Link href="/auth/google">
<a className="button">
<div>
<span className="svgIcon t-popup-svg">
<GoogleLogo />
</span>


</div>
</a>
</Link>
</div>
</LoginLayout>
);
}
}

I tried the first answer, but I got an error, so this works:

module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"]
});


return config;
}};

With Next.js 12.0.9 and Webpack 5 this works for me:

yarn add --dev url-loader @svgr/webpack

// next.config.js
module.exports = {
webpack(config, options) {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack', 'url-loader'],
});
    

return config;
},
};

If you want to use SVG files in your code WITHOUT ANY CONFIG OR INSTALLING A DEPENDENCY and have complete control on the tag's attributes, the best solution is to convert the SVG file to JSX or TSX components.

JSX solution:

export const YourSVg = ({color, width, height}) => (
<svg fill={color} height={height} width={width}>
..rest of the svg tags...
</svg>
)

TSX solution:

   export const YourSVg:React.FC<{color:string, width:string, height:string}> =
({color, width, height}) => (
<svg color={color} height={height} width={width}>
..rest of the svg tags...
</svg>
)

How to use it?

can import it like a normal component and use it same as before

for instance:

import YourSVg from '../from the path/path




<YourSVg color='red' width='10px' height='10px/>

One of the simplest ways to just load the SVG as text and insert it is using the raw-loader.

So first install the npm package raw-loader via your package manager (see the docs), and then use

import mySvgContent from "!!raw-loader!../path/to/image.svg";


function MyComponent ()
{
return (
<div dangerouslySetInnerHTML=\{\{__html: mySvgContent}} />
);
}