简介
在前端开发中，SVG图形已经成为工程中不可或缺的一部分。在众多的SVG解决方案中，@svgr/plugin-jsx是一个用于将SVG文件转换为React组件的npm包，它不依赖于任何其他的库，可以在React项目中方便地使用。本文将会详细阐述如何使用@svgr/plugin-jsx，以及一些示例。
安装
使用npm进行安装：
npm install @svgr/plugin-jsx --save-dev
使用
配置
首先，需要在webpack或babel配置文件中添加一个loader，如下所示：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
-
------- ----------------
-------- -
------ ------
----- ----
-
--
-------------
-
-
-
-这里我们使用了file-loader和@svgr/webpack，并传入了一些选项。
其中，@svgr/webpack是将SVG转换为React组件的loader。
babel：设置是否使用babel转换，默认为true。icon：设置是否使用svg-react-icon的结构生成组件，这里我们传入true。
转换SVG文件
接着，我们需要在React组件中使用这些SVG图形。我们可以将SVG文件导入到React组件中，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- -- ---- - ---- -------------
-------- ----- -
------ -
---- ----------------
------- -----------------------
----- -------------------- --
---
---- ----------------------- --- ---- -- -------
----
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
------
--
-
------ ------- ----在这里，我们使用了ReactComponent导入SVG组件，Logo就是SVG图形转换后的React组件。
不过要注意，我们在使用ReactComponent导入SVG时，需要使SVG图形的根元素是一个<svg>标签，并且必须添加xmlns="http://www.w3.org/2000/svg"属性。
这是因为SVG文件本身是XML格式，SVG规范中规定了需要添加xmlns属性，否则将无法被识别为SVG文件。
使用选项
在使用@svgr/plugin-jsx时，我们还可以传递一些选项。本文只介绍一下最基础的一些选项：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
-
------- ----------------
-------- -
------ ------
----- -----
--------- -------- --------- -- -
----- - -------------- --- - - -------
------ -
------ ----- ---- --------
----- ---------------- - ------- -- -
------ -------
--
----------------------------- - -----------------
---------
---
------ ------- -----------------
--
-
-
--
-------------
-
-
-
-其中，我们添加了一个选项template，用于自定义组件的结构。
在默认情况下，@svgr/plugin-jsx将SVG图形转换为React组件的结构是这样的：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - ------- -- -
---- -----------
----- ------- --
----- ------- --
----- ------- --
------
--
------ ------- ---------而我们在template选项中使用的函数是对这个默认结构的自定义，将生成的组件改为以下形式：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - ------- -- -
------ -
---- -----------
----- ------- --
----- ------- --
----- ------- --
------
--
--
--------------------- - -
-------- -- - -- ----
------ -----
------- -----
----- -------
------- ---------------
------------ ----
-------------- --------
--------------- -------
-
------ ------- ---------通过自定义组件结构，我们可以方便地添加默认props，与项目中的图标组件风格保持一致。
示例
这里提供一个基于webpack的React项目中，如何使用@svgr/plugin-jsx的示例：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
-
------- ----------------
-------- -
------ ------
----- -----
--------- -------- --------- -- -
----- - -------------- --- - - -------
------ -
------ ----- ---- --------
----- ---------------- - ------- -- -
------ -------
--
----------------------------- - -----------------
---------
---
------ ------- -----------------
--
-
-
--
-------------
-
--
-
-
-- ---
---- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ - -------------- -- ---- - ---- -------------
------ - -------------- -- ----- - ---- --------------
-------- ----- -
------ -
---- ----------------
------- -----------------------
----- -------------------- --
---
---- ----------------------- --- ---- -- -------
----
------ --------------------- --
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
------
--
-
------ ------- ----<!-- heart.svg --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M19.78,3.22a6.82,6.82,0,0,0-9.61,0L12,4.66l-1.17-1.44a6.82,6.82,0,0,0-9.61,0A6.15,6.15,0,0,0,1,10.23c0,3.43,3.74,7.22,11,13.88a1.56,1.56,0,0,0,2,0c7.22-6.66,11-10.45,11-13.88A6.15,6.15,0,0,0,19.78,3.22Z" fill="currentColor"/> </svg>
使用方法与普通的React组件导入相似，使用了自定义模板可以方便地添加默认props。
总结
本文详细介绍了如何使用@svgr/plugin-jsx将SVG图形转换为React组件，以及如何自定义组件结构和默认props。这是一个十分实用的npm包，可以方便地在React项目中使用SVG图形。尤其是在需要制作一些与项目样式和主题保持一致的自定义图标时，@svgr/plugin-jsx的优势尤为明显。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/102111