简介
在网页开发过程中，使用 SVG 图片是很常见的。而在这些 SVG 图片中，一般都包含了一些元数据，如图形的标题、作者、描述等。但是，当我们使用这些 SVG 图片时，这些元数据一般是不会显示的，而只有当我们手动加入一些 JavaScript 或 CSS 代码才能让这些元数据得到显示。而这时，就可以使用 @svgr/babel-plugin-svg-dynamic-title 这个 npm 包。
@svgr/babel-plugin-svg-dynamic-title 是一个能够自动为 SVG 图片元数据生成对应的 JavaScript 代码的工具。通过这个工具，我们可以轻松地为 SVG 图片加上标题、作者、描述等元数据，让网页更加美观和易于理解。
安装
@svgr/babel-plugin-svg-dynamic-title 可以通过 npm 安装：
npm install --save-dev @svgr/babel-plugin-svg-dynamic-title
使用方法
配置
安装完成后，我们需要将 @svgr/babel-plugin-svg-dynamic-title 添加到项目的 Babel 配置文件中。例如，在 .babelrc 文件中添加以下配置：
{
"plugins": ["@svgr/babel-plugin-svg-dynamic-title"]
}示例代码
假设我们有一个 SVG 图片文件 circle.svg，它的内容如下：
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="white" /> <title>这是一个圆形</title> <desc>圆形的半径是 40</desc> </svg>
如果我们想要将标题和描述显示在网页上，我们可以使用以下代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
-------
------
---- -------------------------
--------
-- -- --- ----
----- ---------- - -
---- ----------- -------------
------- ------- ------- ------ -------------- ---------------- ------------ --
---------------------
------------ ---------
------
--
-- - --- ------- ---- ---
----- ------------ - -----------------------------------------
---------------------- - -----------
-- -- ---------- -------------
----- ---------- - ------------------------
----- ------------ - --------------------------------------------
----- ----------- - -------------------------------------------
------------------------------------
-----------------------------------
-- -------------- -
-------------- - -------------------------
-
-- ------------- -
----- -------- - ------------------------------
-------------------- - ------------------------
-----------------------------------
-
---------
-------
-------这段代码会将 SVG 文件内容插入到页面中，并使用 JavaScript 代码，将标题和描述显示在页面的 title 元素和一个新建的 div 元素中。
但是，显然这样的代码不够简洁优雅。因此，我们可以使用 @svgr/babel-plugin-svg-dynamic-title，使用它可以自动地将元数据转化为 JavaScript 代码，从而让我们不用手动写这些 JavaScript 代码。
以 webpack 为例，我们可以使用以下代码（注意需要安装 babel-loader 和 svg-inline-loader 来分别处理 JavaScript 和 SVG 文件）：
-- -------------------- ---- -------
-- ----------------- ---- ------------
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- ----------------------------------------
-
-
--
-
----- ---------
---- -
-
------- --------------------
-------- -
----------- ----
-
-
-
-
-
-这样，我们就可以使用以下代码来加载 SVG 图片，并自动显示标题和描述了：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
----- ----------- - -- -- -
------ -
-----
------- --
---------------------
--------------------
------
--
--
------ ------- ------------在这段代码中，我们使用了 import Circle from "./circle.svg" 来加载 SVG 图片。这样，Circle 变量就包含了图像的 JavaScript 代码（@svgr/babel-plugin-svg-dynamic-title 自动生成的代码），其中包括了图像的标题和描述。我们可以直接使用 Circle.title 和 Circle.desc 来获取这些元数据，从而不用再手动写 JavaScript 代码了。
总结
@svgr/babel-plugin-svg-dynamic-title 是一个非常实用的工具，它能够自动为 SVG 图片元数据生成对应的 JavaScript 代码。使用它，可以让我们不用手动写 JavaScript 代码，而直接使用图像的元数据，从而让网页开发变得更加方便和简单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/svgr-babel-plugin-svg-dynamic-title