无法将 SVG 导入 Next.js

Question

当我尝试导入 SVG 图像时，会显示以下错误。 我必须使用哪个加载程序来导入 SVG 图像？

./static/Rolling-1s-200px.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><filter id="b"><feGaussianBlur stdDeviation="12" /></filter><path fill="#817c70" d="M0 0h2000v2000H0z"/><g filter="url(#b)" transform="translate(4 4) scale(7.8125)" fill-opacity=".5"><ellipse fill="#000210" rx="1" ry="1" transform="matrix(50.41098 -3.7951 11.14787 148.07886 107 194.6)"/><ellipse fill="#eee3bb" rx="1" ry="1" transform="matrix(-56.38179 17.684 -24.48514 -78.06584 205 110.1)"/><ellipse fill="#fff4bd" rx="1" ry="1" transform="matrix(35.40604 -5.49219 14.85017 95.73337 16.4 123.6)"/><ellipse fill="#79c7db" cx="21" cy="39" rx="65" ry="65"/><ellipse fill="#0c1320" cx="117" cy="38" rx="34" ry="47"/><ellipse fill="#5cb0cd" rx="1" ry="1" transform="matrix(-39.46201 77.24476 -54.56092 -27.87353 219.2 7.9)"/><path fill="#e57339" d="M271 159l-123-16 43 128z"/><ellipse fill="#47332f" cx="214" cy="237" rx="242" ry="19"/></g></svg>

Answer 1

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

为了将其配置为使用 next，您需要将加载程序的用法添加到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。 这允许您为从其他文件类型（例如.css ）导入的svg配置其他行为

Answer 2

快捷方式： <img>或<Image>

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

可以使用官方的next/image组件或img标签（如this answer中所述）。

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

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 及更高版本上，您还可以执行以下操作：

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']

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

// ...

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

// ...

如果使用打字稿，您需要定义适当的模块（在您导入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 声明为导出any . 您的自定义配置不会覆盖next-env.d.ts设置的类型，除非您排除后者。 请参考这个。

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

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

Answer 3

安装下一个图像。

yarn add -D next-images

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

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

Answer 4

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

Answer 5

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

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

Answer 6

这对我有用，没有任何其他依赖

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

Answer 7

您可以简单地通过<img>标签导入它。

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

只需确保 svg 位于公用文件夹中。

Answer 8

如何将 SVG 导入 Next.js 组件？

无需安装任何库的另一种解决方案

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>
  );
}

并使用：

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>
      );
    }
  }

Answer 9

使用Next.js 12.0.9和Webpack 5这对我有用：

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

Answer 10

你可以使用next-plugin-svgr & next-compose-plugins来清理插件（如果你有的话）：

// next.config.js
const withPlugins = require("next-compose-plugins");
const withSvgr = require("next-svgr");
 
module.exports = withPlugins([
  withSvgr
  // your other plugins here
]);

或者只是next-plugin-svgr ：

// next.config.js
const withSvgr = require('next-plugin-svgr');
 
module.exports = withSvgr({
  webpack(config, options) {
    return config;
  },
});

来源： https ://www.npmjs.com/package/next-plugin-svgr

Answer 11

我尝试了第一个答案，但我得到了一个错误，所以这有效：

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

  return config;
}};

Answer 12

如果你想在你的代码中使用 SVG 文件而不需要任何配置或安装依赖并完全控制标签的属性，最好的解决方案是将 SVG 文件转换为 JSX 或 TSX 组件。

JSX 解决方案：

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

多伦多证券交易所解决方案：

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

如何使用它？

可以像普通组件一样导入它并像以前一样使用它

例如：

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


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

Answer 13

将 SVG 作为文本加载并插入的最简单方法之一是使用raw-loader 。

因此，首先通过 package 管理器（参见文档）安装 npm package raw-loader ，然后使用

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

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

Answer 14

如果您使用 Nextjs 12 或更新版本，有一个简单的解决方案。

在你的next.config.js添加这个：

module.exports = {
    //another configs here
    images: {
        dangerouslyAllowSVG: true,
        contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
    }
}

我在这里创建它