简介
svgr 是一个将 SVG 转换为 React 组件的工具，它可以让你在 React 项目中以组件的形式使用 SVG 图标，从而提高代码的可读性和可维护性。
安装
使用 npm 安装 svgr：
--- ------- ---------- ---------
使用方法
将 SVG 文件转换为 React 组件：
--- ---- --------------------------------- ----------------- -------------------------------
其中
--template参数表示指定模板文件，--out-dir参数表示指定输出目录。在 React 项目中引用生成的组件：
------ ---- ---- ----------------- -------- ------------- - ------ - ----- ----- ---------- ----------- -- ------ -- -注意：生成的组件默认是使用 ES6 模块化语法导出的，如果你需要使用 CommonJS 规范，可以通过添加
--ext=.js参数来解决。
高级用法
自定义模板
svgr 支持自定义模板功能，用户可以根据自己的需求编写模板文件。例如，下面是一个简单的模板文件：
------ ----- ---- --------
------ ------- -------- -------------- -
----- - ---------- ------- - - ------
------ -
---- -------------------- -------------- ---------- - -- --- ----------
----- ----------- ----- ----------- --
--- --- ---- -------- ---
------
--
-在使用时，可以通过 --template=your-template-file.js 参数指定模板文件。
配置选项
svgr 支持一些配置选项，用户可以在 svgr.config.js 文件中设置。例如，下面是一个简单的配置文件：
-------------- - -
---- -
------------ -
-------- ------------------------
--
--
--这个配置文件表示将转换后的组件使用 React 的 JSX 语法，并且使用 @babel/preset-react 作为 Babel 配置。
插件扩展
svgr 还支持插件扩展功能，用户可以根据自己的需求编写插件。例如，下面是一个简单的插件文件：
-------------- - -------- ---------- -
------ -
-------- -
---------------- -
-- -- ---------- --
--
--
--
--在使用时，可以通过 --svgo-config={ "plugins": [{ "myPlugin": true }] } 参数来使用插件。这个参数表示启用名为 myPlugin 的插件。
示例代码
假设有一个名为 icon.svg 的 SVG 图标文件，我们可以使用以下命令将它转换为 React 组件：
--- ---- --------------------------------- -------- ------------------------
然后，在 React 项目中引用生成的组件：
------ ---- ---- --------------------
-------- ------------- -
------ -
-----
----- ---------- ----------- --
------
--
-总结
svgr 是一个非常有用的工具，它可以让我们以组件的形式使用 SVG 图标。通过本文的介绍，相信读者已经学会了 svgr 的基本用法，并且能够根据自己的需求进行高级用法和插件扩展。在实际开发过程中，我们可以将 svgr 进一步应用到项目中，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/47460