在前端开发中，我们经常需要使用 SVG 图标来丰富网页的样式，但是在使用 SVG 图标时，经常会遇到一些问题，例如 SVG 图标的体积较大，加载速度慢等问题。这时，我们可以使用 npm 包 babel-plugin-jsx-svg-inject 来解决这些问题。
简介
babel-plugin-jsx-svg-inject 是一个 Babel 插件，它可以将 SVG 图标作为 JavaScript 模块引入，从而实现优化 SVG 加载速度的目的。它可以把 SVG 文件转换成模块，通过模块导入的方式将 SVG 插入到 JSX 代码中。
用法如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- -------------
-------- ----- -
------ -
-----
---- ---------- ---------- --
------
--
-
------ ------- ----安装
使用 npm 进行安装：
npm install babel-plugin-jsx-svg-inject --save-dev
配置
使用 babel-plugin-jsx-svg-inject 需要在项目的 .babelrc 或 babel.config.js 中进行配置：
.babelrc
-- -------------------- ---- -------
-
---------- -
------------------------------- -
--------- ------------------
---------------- -----------
----------- ----
--
-
-babel.config.js
-- -------------------- ---- -------
-------------- - -
-------- -
-
------------------------------
-
------- ------------------
-------------- -----------
--------- ----
-
-
-
--配置项说明
svgDir (必填)
SVG 文件所在的目录。
attributeName (选填，默认为 data-svg)
插入 SVG 图标的属性名称。
esModule (选填，默认为 true)
是否使用 ES 模块化语法导入插入的 SVG 图标。
示例
接下来我们来看一个完整的示例，假设我们有一个 SVG 图标文件 src/svg-icons/logo.svg，我们可以像下面这样进行配置：
.babelrc
-- -------------------- ---- -------
-
---------- -
------------------------------- -
--------- ------------------
---------------- -----------
----------- ----
--
-
-App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- -------------
-------- ----- -
------ -
---- ----------------
---- ---------- -------------------- ---------- --
---
---- ----------------------- --- ---- -- -------
----
------
--
-
------ ------- ----在上面的示例中，我们首先将 babel-plugin-jsx-svg-inject 添加到 .babelrc 的 plugins 中，然后指定 svgDir 为 ./src/svg-icons，接着在 App.js 中使用了导入了 SVG 图标 logo.svg，并将其作为 src 属性的值传递给 img 标签，这样就可以在页面中正常显示 SVG 图标了。
总结
使用 babel-plugin-jsx-svg-inject 可以让我们更方便地使用 SVG 图标，并可以优化 SVG 的加载速度，提升网页性能。在实际使用时，我们只需要在 .babelrc 或 babel.config.js 中进行简单的配置即可快速上手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b181e8991b448e2f1e