在前端开发中，经常会涉及到使用 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 命令来安装：
npm install babel-plugin-tmp-inline-react-svg-fix --save-dev
安装完成后，我们需要在 .babelrc 文件中进行配置。如果你还没有这个文件，可以在项目根目录下创建一个新的 .babelrc 文件。
在 .babelrc 文件中添加以下配置：
-- -------------------- ---- -------
-
---------- -
--------
--------
--
---------- -
---------------------------------------
-
-使用
在代码中使用嵌入式 SVG，我们需要创建一个包含 SVG 内容的字符串，然后使用 dangerouslySetInnerHTML 属性将其添加到组件中。这样可以避免类似于 fetch 或 require 的网络请求。
import React from 'react';
const SVGIcon = () => (
<div dangerouslySetInnerHTML={{ __html: svgString }} />
);其中，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 文件中添加如下代码：
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0a12 12 0 0 0-3.8 23.3c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.6-4-1.6-.5-1.3-1.3-1.6-1.3-1.6-1-.7 0-.7 0-.7a1.53 1.53 0 0 1 1.1.8 1.53 1.53 0 0 0 2.1.6 1.57 1.57 0 0 1 .5-1c-1.7-.2-3.5-.8-3.5-3.5a2.73 2.73 0 0 1 .7-1.9 2.58 2.58 0 0 1 .1-1.9s.6-.2 1.9.7a6.88 6.88 0 0 1 3.6 0c1.3-.9 1.9-.7 1.9-.7a2.48 2.48 0 0 1 .1 1.9 2.73 2.73 0 0 1 .7 1.9c0 2.7-1.8 3.3-3.5 3.5a2.09 2.09 0 0 1 .6 1.6v2.5c0 .2.2.6.8.6A12 12 0 0 0 12 0z"/></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 /> 来渲染它。该文件代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------------
----- --- - -- -- -
-----
----------- --
------
--
------ ------- ----运行应用
最后，我们可以运行应用，查看渲染结果。
可以使用以下命令来运行应用：
npm start
应用程序应该会启动，并且你应该能够在浏览器中看到渲染的 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