在前端开发中，经常会涉及到使用 SVG 图片。在 React 应用中，我们通常使用 ReactSVG 这个库来加载 SVG 图片。它可以将 SVG 转换成 React 组件，方便我们在应用中使用，但是在某些情况下，我们需要将 SVG 直接嵌入到代码中，以避免额外的网络请求。这时，我们就可以使用 babel-plugin-tmp-inline-react-svg-fix 这个 npm 包来实现。
本文将详细介绍如何使用 babel-plugin-tmp-inline-react-svg-fix。
安装
首先，我们需要在项目中安装 babel-plugin-tmp-inline-react-svg-fix 包。可以使用 npm 命令来安装：
--- ------- ------------------------------------- ----------
安装完成后，我们需要在 .babelrc 文件中进行配置。如果你还没有这个文件，可以在项目根目录下创建一个新的 .babelrc 文件。
在 .babelrc 文件中添加以下配置：
-
---------- -
--------
--------
--
---------- -
---------------------------------------
-
-使用
在代码中使用嵌入式 SVG，我们需要创建一个包含 SVG 内容的字符串，然后使用 dangerouslySetInnerHTML 属性将其添加到组件中。这样可以避免类似于 fetch 或 require 的网络请求。
------ ----- ---- -------- ----- ------- - -- -- - ---- -------------------------- ------- --------- -- -- --
其中，svgString 是我们创建的包含 SVG 内容的字符串。
但是，以上代码仍然存在一个问题。由于 SVG 中可能含有一些特殊字符，比如 <、>、&，如果直接将 SVG 代码放在字符串中，将会导致这些字符被转义。这样就会导致 SVG 渲染错误。
为了避免这个问题，我们需要对 SVG 代码进行编码，使其可以在字符串中正常显示。而这正是 babel-plugin-tmp-inline-react-svg-fix 包的作用。
该包可以使得我们在 JSX 中直接使用 SVG 代码，而不需要对其进行编码。例如，我们可以这样使用 SVG：
------ ----- ---- --------
------ ---------- ---- ---------------
----- --- - -- -- -
-----
------ --------
----------- --
------
--
------ ------- ----在代码中包含 SVG 组件时，Webpack 就会使用 svg-inline-loader 来将 SVG 转换成 URIs，然后将其导入到 JavaScript 代码中。
babel-plugin-tmp-inline-react-svg-fix 会对这些 URIs 进行解码，然后返回真正的 SVG 代码。
示例代码
为了更好地理解 babel-plugin-tmp-inline-react-svg-fix 的使用方法，我们编写如下的示例代码。该示例代码可以在 React 中嵌入一个 GitHub 图标。
准备工作
首先，我们需要在项目中创建一个包含 SVG 图标代码的 .svg 文件。我们可以下载一个 GitHub 图标，然后在 .svg 文件中添加如下代码：
---- ---------------------------------- ---------- ----------- ---------- - -- --------- ------ ---- -- - - ----- ----------------------------------------------------------------------- ---- --------- ---- - - - ----- ---- ---- - - - ----- ---- ---- - - - -------------------------------- ---- - - - ------ ---- ---- - - - ------------ ---------- ---- - - - --- -------- ------ ----------- ---- - - - -- --- ---- ---- - - - -- ----- ------- ------- -------- ---- - - - -- --------- ------------- -- - - - -- -----------
将文件保存为 github.svg。然后在项目中新建一个名为 components 的文件夹，将 github.svg 移动到这个文件夹中。
创建组件
接下来，我们创建一个名为 GitHubIcon.js 的组件，用于渲染 GitHub 图标。该组件代码如下：
------ ----- ---- --------
------ ---------- ---- ---------------
----- ---------- - -- -- -
-----
---------- ---------
----------- --
------
--
------ ------- -----------使用 GithubIcon 组件来渲染 SVG 图标。
编写 .babelrc 文件
为了使用 babel-plugin-tmp-inline-react-svg-fix，我们需要在 .babelrc 文件中进行配置。该文件代码如下：
-
---------- -
--------
--------
--
---------- -
-
----------------------------------------
-
------- -
---------- -
-
------------- -----
--
-
---------------- -----
--
-
----------------- -----
-
-
-
-
-
-
-这个配置文件还配置了 svgo，来禁用一些常见的 SVG 优化操作。
在应用中使用该组件
接下来，我们将 GitHubIcon 组件添加到我们的应用中进行测试。我们需要在 App.js 文件中引入 GitHubIcon 组件，然后使用 <GitHubIcon /> 来渲染它。该文件代码如下：
------ ----- ---- --------
------ ---------- ---- --------------------------
----- --- - -- -- -
-----
----------- --
------
--
------ ------- ----运行应用
最后，我们可以运行应用，查看渲染结果。
可以使用以下命令来运行应用：
--- -----
应用程序应该会启动，并且你应该能够在浏览器中看到渲染的 GitHub 图标。
结论
在本文中，我们介绍了如何使用 babel-plugin-tmp-inline-react-svg-fix 在 React 应用中嵌入 SVG 图标。该插件可以轻松地将 SVG 代码嵌入到应用程序中，这样我们就不必担心浏览器的网络请求优化工作。
如果你希望让你的应用程序快速响应并保持简单，那么使用 babel-plugin-tmp-inline-react-svg-fix 是一个不错的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005608081e8991b448deb4c