无法将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.config.js程序的用法添加到文件中，如下所示：

// next.config.js

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

    return config;
  }
};

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

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

Answer 2

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

以下是如何使用它：

1. 安装next-react-svg：

npm i next-react-svg

2. 将必要的设置添加到next.config.js：

npm i next-react-svg

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

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

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

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

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

Answer 3

你可以使用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 4

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

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

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

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

import Image from 'next/img';

// ...

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

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

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

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

import Image from 'next/img';

import Illustration from '../public/Rolling-1s-200px.svg';
// can be imported from anywhere, not necessarily public

// ...

<Image src={Illustration} />

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

该接受的答案已经展示了如何使用做到这一点webpack-4，但由于webpack-5现在是默认的，我分享了适当的配置。您可以在安装@svgr/webpack(yarn add -D @svgr/webpack或npm install @svgr/webpack --save-dev)后使用它：

import Image from 'next/img';

// ...

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

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

// index.d.ts

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

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

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

// ...

<Logo />

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

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

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

Answer 5

安装next-images。

yarn add -D next-images

在您的项目中创建next.config.js

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

Answer 6

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

// In next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");

module.exports = withCSS(withSass({
    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;
    }
}));