将 SVG 导入 Next.js

作为文件导入

您应该使用哪一个？

SVG 很棒！它们是可缩放矢量图形。由于它们基于矢量，因此可以缩放到很大或很小，并且不会像素化。它们由 XML 组成，描述了生成最终图像所需的路径和形状。它们是响应式 Web 设计的绝佳选择，但将它们导入到 Next.js 应用程序中并不总是那么简单。

本文将介绍几种不同的方法来完成这一常见任务。

包括直接

<svg>是一个标准的 HTML 标签，可以直接在 JSX 中使用。这意味着，如果你的 SVG 很短，那么直接在 JSX 中使用它会非常容易。

使用<img>标签

您可以使用常规的 img 标签并通过 URL 引用 SVG。您需要将图像放置在/public目录中，并相对于该目录进行引用。

<img src="/eye.svg" alt="An SVG of an eye" />

该文件位于public目录的根目录中。

使用下一个/图像

同样，您可以使用Image中包含的组件next/image。这里唯一要注意的是，此组件需要将高度和宽度作为 props 传递。

<Image src="/eye.svg" height={30} width={30} />

作为组件

您可以将其作为组件包含在文档中，并根据需要调用它。这样做的好处是可以将 SVG 代码集中在一个地方。

将此 SVG 作为单独文件中的组件并不困难。

将 SVG 组件化后，您可以传递 props 来改变其外观。您可以接收 props，然后直接在 SVG 上使用它们。

作为文件导入

如果你尝试直接将 SVG 导入为如下文件，

import eye from "../assets/eye.svg";

您将收到如下错误：

 Module parse failed: Unexpected token (1:2)
 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

为了使其工作，您需要添加 webpack 或 babel 扩展。

我们先来看一个webpack的解决方案。

SVGR

该工具内置于 create-react-app，因此如果您以前使用过它，那么这将是一个熟悉的工具。

首先，使用 yarn 或 npm 安装@svgr/webpack到你的项目中。然后，你需要next.config.js在项目的根目录中创建或添加。

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

    return config;
  }
};

Webpack 有时候对我来说有点难以理解。这里我们添加了一条规则 ( rules.push)。具体来说，我们会测试文件是否是 SVG，如果是，则使用上面安装的库。

值得注意的是，如果您进行了更改，next.config.js则需要重新启动开发服务器才能注意到更改。

一旦重新启动，上述错误就会消失。

babel 插件

如果你不想使用 webpack，可以使用 babel。有一个名为 的插件babel-plugin-inline-react-svg。安装该库，然后.babelrc在你的仓库根目录中创建一个。

.babelrc是一个包含两个键的对象：presets 和 plugins。在 presets 中，我们将添加next/babel。它本来就包含在项目中，但我们需要通过添加配置文件来明确指定它。

对于我们的插件，我们将添加inline-react-svg。因此，最终文件将如下所示。

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "inline-react-svg"
  ]
}

下一张图片

如果您希望一个解决方案能够涵盖多种不同的图像类型，那么您next-images可能会对这个库感兴趣。这是一个针对 Next.js 优化的插件，允许将svg、ico和jp2其他类型的图像导入到您的项目中。

一旦安装了依赖项，这个next.config.js也需要配置。

const withImages = require("next-images");
module.exports = withImages();

您应该使用哪一个？

我不是你的老板:)

我有一个决策树，看起来有点像这样：

• 我想要控制 SVG 吗？
  • 带有 props 的组件
• 这是要进行内容管理的图像吗？
  • next-images或 webpack
• 这是一张我只会使用一次的图像吗？
  • 将其粘贴到public直接引用中

你呢？你更喜欢哪种方法？为什么？

这是一个 Codesandbox，其中包含我们在本文中讨论过的所有各种选项。

来 Twitter 上关注我吧。我会分享一些有用的技巧和在网上发现的有趣的东西。