作为一名前端开发人员，我们经常需要使用 SVG 图标来装饰我们的网站和应用程序。如果你在一个使用 React 的项目中工作，那么你可能已经知道如何使用 SVG 图标了。但是，如果你使用 Next.js，那么你需要知道一些额外的步骤来导入 SVG 图标。在本篇文章中，我们将讨论 Next.js 中如何导入 SVG 图标。
为什么在 Next.js 中导入 SVG 图标会有所不同？
在一个传统的 React 项目中，你可以使用一个名为 url-loader 的 webpack 加载器来导入 SVG 图标。url-loader 将 SVG 格式的图标转换成一个 base64 字符串，然后将其嵌入到生成的 JavaScript 文件中。这样一来，你就可以使用像这样的代码来渲染 SVG 图标：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- -------------
-------- ------------- -
------ -
-----
---------- -----------
----- --
------
--
-但是，在 Next.js 中，你不能像这样使用 url-loader。因为 Next.js 在构建时会生成静态 HTML 文件，它不会像传统的 React 项目那样使用 JavaScript 来渲染页面。因此，在 Next.js 中，你需要使用一个名为 @svgr/webpack 的 webpack 加载器来导入 SVG 图标。@svgr/webpack 将 SVG 格式的图标转换成一个 React 组件，你可以直接在你的代码中使用这个组件来渲染 SVG 图标。
如何在 Next.js 中导入 SVG 图标？
在 Next.js 中导入 SVG 图标的过程非常简单。首先，你需要安装两个 npm 依赖项：@svgr/webpack 和 file-loader。你可以使用以下命令在你的 Next.js 项目中安装这些依赖项：
npm install --save-dev @svgr/webpack file-loader
安装完成后，你需要在 Next.js 的 webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
--------------- -
--------------------------
----- ---------
---- ----------------
---
------ -------
--
--这段代码会将 .svg 文件交给 @svgr/webpack 加载器来处理。在处理过程中，@svgr/webpack 将 SVG 格式的图标转换成一个 React 组件，并将其输出到一个 JavaScript 文件中。之后，你可以在你的 Next.js 代码中像这样导入 SVG 图标：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- -- ---- - ---- -------------
-------- ------------- -
------ -
-----
---------- -----------
----- --
------
--
-注意，我们使用了 ReactComponent 这个命名导出。这个命名导出是由 @svgr/webpack 自动生成的，它指向了转换后的 React 组件。这样一来，你就可以直接在你的代码中使用这个组件来渲染 SVG 图标了。
将 SVG 图标作为组件库导出
如果你正在开发一个面向组件的项目，那么你可能会想将一系列 SVG 图标都作为一个组件库导出。为了实现这个目的，你可以创建一个名为 icons.js 的文件，并在其中导入和重新导出所有的 SVG 图标。以下是一个示例 icons.js 文件：
// icons.js
export { ReactComponent as Icon1 } from './icon1.svg';
export { ReactComponent as Icon2 } from './icon2.svg';
export { ReactComponent as Icon3 } from './icon3.svg';
// ... 导入和重新导出更多的 SVG 图标之后，你可以将 icons.js 文件作为一个组件库来导入，并将其包含在你的 Next.js 代码中。以下是一个示例 MyComponent 组件，它使用了从 icons.js 中导入的 SVG 图标：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ - -- ----- ---- ----------
-------- ------------- -
------ -
-----
---------- -----------
------------ --
------------ --
------------ --
--- --- -------- --- -- ---
------
--
-
------ ------- ------------总结
在本篇文章中，我们讨论了如何在 Next.js 中导入 SVG 图标。由于 Next.js 的构建方式与传统的 React 项目不同，你需要使用 @svgr/webpack 加载器来将 SVG 图标转换为 React 组件。在你的代码中，你可以使用 ReactComponent 命名导出来引用转换后的 React 组件。我们还讨论了如何将一系列 SVG 图标作为一个组件库导出，以便在你的 Next.js 项目中重复使用它们。我希望这篇文章能够帮助你更好地理解如何在 Next.js 中导入 SVG 图标，以及如何将它们作为一个组件库重复使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b14e3048841e9894da1772