How to import svg file into next js?

在 Next.js 中，导入并使用 SVG 文件有几种方法，以下是几种常见的做法：

1. 使用图片标签 <img>

这是最简单的方法，直接将 SVG 作为图片源引入：

jsx
import React from 'react';

const MyComponent = () => (
  <div>
    <img src="/path/to/your-image.svg" alt="My SVG Image" />
  </div>
);

export default MyComponent;

在这个例子中，您只需要将 SVG 文件放到公共文件夹（通常是 public 文件夹）中，然后像引用常规图片一样引用 SVG 文件。

2. 使用 Next.js 的 Image 组件

Next.js 提供了一个内置的 Image 组件，用于优化图片加载：

jsx
import Image from 'next/image';
import React from 'react';

const MyComponent = () => (
  <div>
    <Image src="/path/to/your-image.svg" alt="My SVG Image" width={500} height={500} />
  </div>
);

export default MyComponent;

和上述 <img> 标签方法类似，您需要把 SVG 图片放在 public 目录下。

3. 使用 SVG 作为组件

从 Next.js 9.5.4 开始，您可以通过 next.config.js 配置文件中的 inline-react-svg 插件，直接将 SVG 文件导入为 React 组件：

首先，您需要安装相应的插件：

bash
npm install react-svg-loader --save-dev

接着在 next.config.js 中配置：

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

module.exports = withReactSvg({
  include: path.resolve(__dirname, 'path/to/svgs'),
  webpack(config, options) {
    return config;
  }
});

然后您可以直接导入 SVG 文件并将其作为组件使用：

jsx
import React from 'react';
import YourSvg from '/path/to/your-image.svg';

const MyComponent = () => (
  <div>
    <YourSvg />
  </div>
);

export default MyComponent;

这使得 SVG 的处理就像 React 组件一样简单，您可以轻松地给 SVG 添加 className 或其他属性。

4. 使用 next-svg

next-svg 是一个 Next.js 插件，允许您在 Next.js 项目中直接导入 SVG 文件作为 React 组件。使用方法类似于 next-react-svg，首先安装插件，然后在 next.config.js 中进行配置。

以上就是在 Next.js 中导入 SVG 文件的几种方法。您可以根据项目需求和个人喜好选择合适的方法。

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

为了将其配置为与下一个一起使用，您需要将next.config.js加载程序的用法添加到文件中，如下所示：

shell
// 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：

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

编辑

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

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

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

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

您只需将svg文件移至public而不是static，然后执行如下操作：

shell
import Image from 'next/image';

// ...

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

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

还需要指定width和height，但您可以根据viewbox属性计算它。

在 Next.js v11 及更高版本上，您还可以执行以下操作：

shell
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）：

shell
// 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加载程序，那么您可以简单地编写以下内容：

shell
use: ['@svgr/webpack']

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

shell
// ...

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

// ...

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

shell
// index.d.ts

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

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

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

// ...

<Illustration />

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

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

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

---

使用涡轮包装？

@svgr/webpack你可以这样添加：

shell
// next.config.mjs

export default {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js'
        }
      }
    }
  }
}

（摘自https://x.com/leeerob/status/1755974197581603210）

安装下一个图像。

shell
yarn add -D next-images

在项目中创建 next.config.js

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

我个人更喜欢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来正确组合它们。

1. 将 SVG 作为普通 React 组件导入：

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

   export default () => ( );

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

您可以使用babel-plugin-inline-react-svg

shell
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"
  ]
}

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