在前端开发中，使用 SVG 图片可以带来很多好处，例如清晰度高、可缩放等。而在 Next.js 中使用 SVG 图片也非常简单，接下来就让我来教你如何使用。
为什么要使用 SVG 图片
相比于传统图片格式，如 JPEG、PNG 等，SVG 图片有以下优点：
- 清晰度高：SVG 图片是矢量图形，可以放大或缩小而不会失真。
- 文件大小小：SVG 图片是文本文件，相对于传统图片格式，文件大小更小。
- 易于编辑：SVG 图片可以使用 Vectors 软件进行编辑，非常方便。
因此，使用 SVG 图片在提高页面性能优化、精简代码等方面都非常有帮助。
在 Next.js 中如何使用 SVG 图片
在 Next.js 中使用 SVG 图片需要用到两个 npm 包：
next-images@svgr/webpack
安装依赖
在项目的根目录下安装依赖：
npm install --save next-images @svgr/webpack
配置 next.config.js 文件
在项目的根目录下，新建 next.config.js 文件，并输入以下内容：
-- -------------------- ---- -------
----- ---------- - ----------------------
-------------- - ------------
--------------- -------- -
--------------------------
----- ---------
---- -----------------
--
------ ------
-
--这里配置了使用 next-images 和 @svgr/webpack，并将 .svg 文件用 @svgr/webpack 处理。
使用 SVG 图片
将 SVG 图片保存到项目中，然后可以将其作为 React 组件使用。例如，将以下 SVG 图片保存到项目中并命名为 heart.svg：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M17.66.34a5.5 5.5 0 0 0-7.72 0L12 1.38l-2.94-1.04a5.5 5.5 0 0 0-7.72 7.72l2.6 2.6 4.06 11.6a1.5 1.5 0 0 0 2.85 0l4.06-11.6 2.6-2.6a5.5 5.5 0 0 0 0-7.72z"
/>
</svg>然后在组件中导入 SVG 图片：
-- -------------------- ---- -------
------ -------- ---- ---------------------
-------- ------------- -
------ -
-----
--------- --
------
-
-现在，你就可以在 Next.js 中使用 SVG 图片了。
更多 SVG 图片处理选项
@svgr/webpack 还提供了一些其他的处理选项，例如更改 SVG 图片大小和颜色、添加类名和样式等。更多选项请参考官方文档。
总结
在 Next.js 中使用 SVG 图片，需要安装 next-images 和 @svgr/webpack 两个 npm 包，并配置 next.config.js 文件。使用 SVG 图片可以提高页面性能优化、精简代码等方面的优点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64508e8f980a9b385b98eadd