什么是 @svgr/hast-util-to-babel-ast
@svgr/hast-util-to-babel-ast 是一个 NPM 包，它提供了将 SVG 转换为 Babel AST 的能力。它采用了 hast-util-to-babel-ast 库，用于将 SVG 节点转换为 Babel AST。此外，它还提供了额外的功能，如更好的错误处理和一些默认选项。
开始使用 @svgr/hast-util-to-babel-ast
安装
要开始使用 @svgr/hast-util-to-babel-ast，首先需要安装它。可以使用以下命令从 NPM 下载安装：
npm install @svgr/hast-util-to-babel-ast
或者，如果你使用的是 Yarn，则可运行以下命令：
yarn add @svgr/hast-util-to-babel-ast
用法
要将 SVG 转换为 Babel AST，首先需要将 SVG 转换为 hast 树。可以使用其他库来完成这个步骤，但是这个教程将专注于 @svgr/hast-util-to-babel-ast 范围内的操作。
下面是一个例子，演示了如何使用 @svgr/hast-util-to-babel-ast：
-- -------------------- ---- ------- ------ - ----- - ---- ------------- ------ - ------- - ---- ------------------------------- ----- --- - ----- ---------- - -- --------- ----- ----- ---------- --------------------- -- - --- --- ---- - ----- ---- - ----------- -- - ---- ---- ----- --- ----- -------- - -------------- ----------------------
运行以上代码，将输出以下内容：
-- -------------------- ---- -------
-
----- ----------
------ --
---- ---
---- -
------ - ----- -- ------- - --
---- - ----- -- ------- -- -
--
----------- ---------
----- -
-
----- ----------------------
------ --
---- ---
---- -
------ - ----- -- ------- - --
---- - ----- -- ------- -- -
--
----------- -
----- -------------
------ --
---- ---
---- -
------ - ----- -- ------- - --
---- - ----- -- ------- -- -
--
--------------- -
----- --------------------
------ --
---- ---
---- -
------ - ----- -- ------- - --
---- - ----- -- ------- -- -
--
----------- -
-
----- ---------------
------ --
---- ---
---- -
------ - ----- -- ------- - --
---- - ----- -- ------- -- -
--
----- -
----- ----------------
------ --
---- ---
---- -
------ - ----- -- ------- - --
---- - ----- -- ------- -- -
--
----- ---------
--
------ -
----- ----------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
------ -- - -- ----
---- --- - -- ----
-
-
--
----- -
----- ----------------
------ --
---- --
---- -
------ - ----- -- ------- - --
---- - ----- -- ------- - -
--
----- -----
--
------------ -----
--
--------------- -
----- --------------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----- -
----- ----------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----- -----
-
--
--------- -
-
----- -------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
--------------- -
----- --------------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----------- -
-
----- ---------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----- -
----- ----------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----- ---
--
------ -
----- ----------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
------ ----
---- -----
-
--
-
----- ---------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----- -
----- ----------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----- ---
--
------ -
----- ----------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
------ ----
---- -----
-
--
-
----- ---------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----- -
----- ----------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----- -------
--
------ -
----- ----------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
------ -----
---- ------
-
--
-
----- ---------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----- -
----- ----------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----- --------
--
------ -
----- ----------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
------ -----
---- ------
-
-
--
----- -
----- ----------------
------ ---
---- ---
---- -
------ - ----- -- ------- -- --
---- - ----- -- ------- -- -
--
----- ------
--
------------ ----
--
--------------- -----
--------- ---
------ -
-------------- ----
-
-
--
------ -
-------------- -----
-
-
-
--
----------- --
-总结
@svgr/hast-util-to-babel-ast 是一个强大的 NPM 包，可以将 SVG 转换为 Babel AST。在本文中，我们学习了如何安装和使用它。现在你应该对如何在前端应用它有了一定的认识。可以尝试将你自己的 SVG 转换为 Babel AST，看看它是如何工作的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/148134