How to import svg file into nextjs?

在 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配置其他行为

我个人更喜欢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 标签包含到渲染的标记中。