在前端开发中，SVG (Scalable Vector Graphics) 作为一种矢量图形格式，已经被广泛地应用于网站和应用中。然而，使用 SVG 图形时，由于浏览器的兼容性、大小和渲染方面的限制，我们需要使用一些工具来处理 SVG 图形。其中，@svgr/core 就是在 React 应用中将 SVG 图形转换为 React 组件的一个好工具，使得开发人员可以将 SVG 图形以 React 组件的形式在应用中使用。
安装
@svgr/core 是一个 npm 包，可以通过 npm 或 yarn 进行安装。
npm install @svgr/core --save-dev # or yarn add @svgr/core --dev
使用
命令行
@svgr/core 提供了命令行工具可以将 SVG 文件转换为 React 组件。
npx @svgr/core --icon --replace-attr-values=#666 src/icons/svg/arrow.svg --out-dir src/icons
其中，--icon 表示生成的组件将包括额外的 props，--replace-attr-values=#666 表示将 SVG 图形中所有属性值为 #666 的替换为当前颜色，src/icons/svg/arrow.svg 是输入的 SVG 文件路径，--out-dir src/icons 表示输出文件夹的路径。
JS 函数
@svgr/core 也可以作为一个 JS 函数使用。通过调用 @svgr/core 模块中的 inline 方法，可以将 SVG 图形转换为 React 组件。
-- -------------------- ---- -------
------ - ------ - ---- -------------
----- ------------ - --------
---- ---------------------------------- ---------- - -- ----
----- -------- --------- ---------- ----- - --- ---
---
-------- ----- -
------ -
-----
------------- --
------
--
-其中，调用 inline 方法时需要将 SVG 图形的字符串作为参数传入。生成的组件将返回一个 React 组件，可以像其他 React 组件一样使用。
配置
@svgr/core 可以通过配置来处理 SVG 图形。配置可以用于设置组件的属性（如大小、颜色、填充等）以及传递给插件。
-- -------------------- ---- -------
------ - ---- - ---- -------------
------ ---- ---- -------
----- ------- - -
----------- ------ -- --- ------- - ----------- --
--------- ----- -- -- -------- -----
-------- -
-------------------
------------------------
-- -------
-
---- -
-- -------
-------------- ---------------------
--
--
--
--
----- ------- - -
---- ---------------------------------- ---------- - -- ----
----- -------- --------- ---------- ----- - --- ---
--
----- ------------- - ------------- -------- - --------- -------------------- ----------- ---
---------------------------在上面的代码中，options 是配置对象。其中，dimensions 表示是否添加 viewBox 和 width/height 属性，prettier 表示是否使用 prettier 来格式化代码，plugins 表示插件数组，用于配置插件或添加自定义插件。可以根据需要自定义配置。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- -- ------------ - ---- --------------
-------- ----- -
------ -
-----
------------- ---------- ----------- ---------- --
------
--
-在上面的代码中，<ReactComponent> 是 @svgr/webpack 包中挂载的特殊组件，它可以将 SVG 文件转换为 React 组件。width 和 height 属性是 SVG 图形的宽度和高度，fill 属性是 SVG 图形的颜色。
结语
@svgr/core 是一个很好用的将 SVG 图形转换为 React 组件的工具。使用起来非常简单，并且可以通过配置和插件来实现更多的定制化需求。在实际开发中，可以根据需要来灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/102110