How to import svg file into nextjs?

In Next.js, there are several approaches to importing and using SVG files. Here are some common methods:

1. Using the <img> Tag

This is the simplest method: directly import the SVG as an image source:

jsx
import React from 'react';

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

export default MyComponent;

In this example, place the SVG file in the public folder (typically the public directory), and reference it as you would with a regular image.

2. Using Next.js's Image Component

Next.js provides a built-in Image component for optimized image loading:

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;

Similar to the <img> tag method, place the SVG image in the public directory.

3. Using SVG as a Component

Starting with Next.js 9.5.4, configure the inline-react-svg plugin in the next.config.js file to directly import SVG files as React components:

First, install the required plugin:

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

Then configure it in 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;
  }
});

After that, directly import the SVG file and use it as a component:

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

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

export default MyComponent;

This makes handling SVGs as straightforward as working with React components, allowing you to easily add className or other attributes.

4. Using next-svg

next-svg is a Next.js plugin that enables importing SVG files directly as React components in your project. The usage mirrors next-react-svg: first install the plugin, then configure it in next.config.js.

These are several approaches to importing SVG files in Next.js. Select the method that best fits your project requirements and preferences.

I recommend the next-react-svg plugin, as it enables treating SVG images as React components and automatically inlining them, similar to how Create React App handles it.

Here's how to use it:

1. Install next-react-svg:

   bash
   npm i next-react-svg

2. Add the necessary configuration to next.config.js:

   javascript
   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 required, as it specifies the directory containing your SVG images.

   If you have enabled any plugins for Next.js, consider using next-compose-plugins to integrate them correctly.

3. Import SVG as a regular React component:

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

Done. Starting now, Next.js will include the imported SVG images as SVG tags within the rendered markup.

您需要提供一个 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配置其他行为