你需要提供一个 webpack 加载器来处理 SVG 导入，其中一个著名的就是svgr。

为了配置它以供下一步使用，您需要将next.config.js加载器的用法添加到您的文件中，如下所示：

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

有关更多配置信息，请查看文档。

不要忘记先安装@svgr/webpack：

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

编辑

我添加了一个issuer部分，将这些 svg 严格为组件，仅适用于从js / ts文件导入的 svg 。这允许您为svg从其他文件类型（例如.css）导入的 s配置其他行为

安装next-images。

yarn add -D next-images

在你的项目中创建一个 next.config.js

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

快速方法：<img>或<Image>

不适合交互式 SVG，或者如果您打算通过外部 CSS/JS 操作 SVG

可以使用官方next/image组件或img标签（如本答案所述）。

您只需要将svg文件移动到public而不是static，然后执行以下操作：

import Image from 'next/image';

// ...

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

但是使用这种方法，svg文件的内容不会直接出现在响应中；浏览器会得到一个<img src="..." ...></img>标签。

还需要指定widthand height，但您可以从viewbox属性中计算它。

在 Next.js v11.x 上，您还可以执行以下操作：

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} ... />

在 HTML 中包含 SVG（用于 webpack-5、TS）

该接受的答案已经展示了如何使用做到这一点webpack-4，但由于webpack-5现在是默认的，我分享了适当的配置。您可以在安装@svgr/webpack(yarn add -D @svgr/webpack或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;
  },
};

如果您不使用options加载器，那么您可以简单地编写：

use: ['@svgr/webpack']

如果您使用的是 v6 of@svgr/webpack那么您需要像这样指定 SVGO 配置：

// ...

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

// ...

如果使用typescript，您需要定义适当的module（在您导入的目录中svg，或者将其添加到根目录中<some-name>.d.ts并包含它tsconfig）：

// index.d.ts

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

然后你可以像这样使用它：

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

// ...

<Illustration />

注意：Next.js v11.0.1+ 已将 SVG 声明为module导出any。您的自定义配置不会覆盖设置的类型，next-env.d.ts除非您排除后者。请参考这个。

[过时（已修复） ]更新：

如果您使用 Next.js v11.0.0，那么您在导入 SVG 时可能会遇到错误。请更新至v11.0.1或以上。请遵循此评论中提到的解决方法。

我个人更喜欢next-react-svg插件，它允许将 SVG 图像视为 React 组件并自动内联它们，类似于 Create React App 所做的。

以下是如何使用它：

1. 安装next-react-svg：

npm i next-react-svg

2. 将必要的设置添加到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
  }
})

该include参数是强制性的，它指向您的 SVG 图像文件夹。

如果您已经为 Next.js 启用了任何插件，请考虑使用next-compose-plugins来正确组合它们。

3. 将您的 SVG 导入为普通的 React 组件：

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

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

而已。从现在开始，Next.js 将把以这种方式导入的 SVG 图像作为 SVG 标签包含在渲染标记中。

你可以使用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"
  ]
}

或查看链接以获取更多说明。