传统的 HTML 页面需要通过 <img> 标签引入 SVG 图片，但在 React 和类似的库中，我们可以直接引入 SVG 组件来渲染图像。在 Next.js 中，我们可以通过以下步骤引入 SVG 组件。
第一步：安装适当的依赖
在 Next.js 中引入 SVG 组件需要使用 babel-plugin-inline-react-svg 插件。该插件将 SVG 图片内嵌进 React 组件，而不是将其作为外部文件引用。这样可以减少 HTTP 请求并提高性能。
在你的项目中使用以下命令安装插件：
npm install --save-dev babel-plugin-inline-react-svg
第二步：在 .babelrc 文件中添加插件
将 babel-plugin-inline-react-svg 添加到你的项目的 .babelrc 文件的 plugins 数组中。如果文件不存在，请创建一个新文件并添加以下代码：
{
"presets": ["next/babel"],
"plugins": ["inline-react-svg"]
}在这个简单配置中， next/babel 预设可以使你使用最新的 JavaScript 语言功能而无需任何配置。我们还将 inline-react-svg 添加到插件列表中。
第三步：导入并渲染 SVG 组件
现在，我们已经为 Next.js 中的 SVG 组件设置好环境，接下来我们可以在组件中导入和渲染 SVG。
你可以使用以下代码将 SVG 图像导入组件：
-- -------------------- ---- -------
------ -------- ---- ----------------------
----- ----------- - -- -- -
-----
--------- --
------
--
------ ------- ------------在这个例子中，我们将 image.svg 文件放在 /public 文件夹中。通过导入图像并在 JSX 中直接使用 SVG 组件，我们可以在 Next.js 应用程序中非常方便地使用 SVG。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ----------------------
----- ----------- - -- -- -
-----
--------- --
------- -- -- --- ----------
------
--
------ ------- ------------现在，您可以通过访问 http://localhost:3000 查看我的组件的输出。
结论
在本文中，我们讨论了如何在 Next.js 中引入 SVG 图像组件的过程。这些步骤和示例代码说明了如何在 Next.js 中使用 SVG 页面图像。通过使用内联 SVG 字符串，即可减少 HTTP 请求并提高应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673477810bc820c5824947eb