如果你是一名前端开发者，并且对 SVG 图片的使用和处理比较感兴趣，那么，今天我要介绍的 npm 包 @deal/parcel-plugin-svgr 就是你需要的工具。
本文将详细介绍 @deal/parcel-plugin-svgr npm 包的使用方法，包括如何安装、用法说明和示例代码等。
什么是 @deal/parcel-plugin-svgr
@deal/parcel-plugin-svgr 是一个基于 parcel 打包工具的插件，用于将 SVG 文件转换成 React 组件。它是通过使用 @svgr/core 实现 SVG 转换，并将转换后的 React 组件直接引入到你的项目中。
安装
安装 npm 包很简单，只需在控制台输入以下命令即可：
--- ------- ------------------------ - -- ---- --- ------------------------
使用方法
使用 @deal/parcel-plugin-svgr，只需要两个步骤：
步骤一： 在项目根目录建立 .parcelrc 文件
在你的项目根目录下建立一个名为 .parcelrc 的文件，为此，你需要使用以下命令：
----- ---------
在这个文件中，配置 @deal/parcel-plugin-svgr 选项：
-
---------- -------------------------
---------- -
--------------------------- --
-
-步骤二： 在代码中使用 SVG 文件
在你的 React 代码中，使用 @deal/parcel-plugin-svgr 转换的 SVG 文件，很简单，只需像普通的组件一样引入即可：
------ ----- ---- ---------------
-------- ------------- -
------ -
-----
------ --
------
--
-示例代码
以下展示一个使用 @deal/parcel-plugin-svgr 转换的 SVG 文件的完整示例：
SVG 文件
---- ---------------------------------- ---------- - -- --------- -----------------
React 组件
------ ----- ---- --------
----- ----- - ------- -- -
---- ---------- - -- --- -----------
----- -----------
------
--
------ ------- ------总结
通过本文的介绍，你学会了如何使用 @deal/parcel-plugin-svgr npm 包将 SVG 文件转换成 React 组件，并在项目中引入使用。希望这对你有所帮助，也欢迎大家留言分享更多技术交流心得。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/146858