如果你是一名前端开发者，并且对 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 包很简单，只需在控制台输入以下命令即可：
npm install @deal/parcel-plugin-svgr # 或者 yarn add @deal/parcel-plugin-svgr
使用方法
使用 @deal/parcel-plugin-svgr，只需要两个步骤：
步骤一： 在项目根目录建立 .parcelrc 文件
在你的项目根目录下建立一个名为 .parcelrc 的文件，为此，你需要使用以下命令：
touch .parcelrc
在这个文件中，配置 @deal/parcel-plugin-svgr 选项：
{ "extends": "@parcel/config-default", "plugins": { "@deal/parcel-plugin-svgr": {} } }
步骤二： 在代码中使用 SVG 文件
在你的 React 代码中，使用 @deal/parcel-plugin-svgr 转换的 SVG 文件，很简单，只需像普通的组件一样引入即可：
-- -------------------- ---- ------- ------ ----- ---- --------------- -------- ------------- - ------ - ----- ------ -- ------ -- -展开代码
示例代码
以下展示一个使用 @deal/parcel-plugin-svgr 转换的 SVG 文件的完整示例：
SVG 文件
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6..."/></svg>
React 组件
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ----- - ------- -- - ---- ---------- - -- --- ----------- ----- ----------- ------ -- ------ ------- ------展开代码
总结
通过本文的介绍，你学会了如何使用 @deal/parcel-plugin-svgr npm 包将 SVG 文件转换成 React 组件，并在项目中引入使用。希望这对你有所帮助，也欢迎大家留言分享更多技术交流心得。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/146858
