本文将介绍如何使用 npm 包 rollup-plugin-react-svg 来将 SVG 图片文件导入 React 组件中，并在打包时将其转换为 React 组件。该插件可简化将 SVG 图片转换为 React 组件的繁琐过程，同时还能对打包后的代码进行优化。
前置知识
为了更好地理解本教程，你需要具备以下基础知识：
- React 基础知识
- npm 包的安装和使用
- Rollup 打包工具的基础知识
安装
首先，我们需要在项目中安装 rollup-plugin-react-svg：
npm install --save-dev rollup-plugin-react-svg
使用
导入图片
使用 rollup-plugin-react-svg 时，我们需要先将 SVG 图片文件导入到我们的 React 组件中。可以使用类似下面的代码来实现：
import { ReactComponent as Icon } from './icon.svg';
function App() {
return <Icon />;
}配置 Rollup
接下来，我们需要在我们的 Rollup 配置文件（通常是 rollup.config.js）中配置该插件：
-- -------------------- ---- -------
-- ----------------
------ -------- ---- --------------------------
------ ------- -
------ ---------------
------- -
----- ----------------
------- -----
--
-------- -
-- -- -----------------------
----------
-
--执行打包
最后，我们可以使用 rollup 命令执行打包：
npx rollup -c
高级用法
rollup-plugin-react-svg 还有一些高级用法，可以让我们更加灵活地控制打包过程。
include 和 exclude
通过 include 和 exclude 属性，我们可以指定哪些文件需要被转换，哪些文件不需要被转换：
reactSvg({
include: '**/*.svg',
exclude: 'node_modules/**'
})上面的配置将会将项目中所有后缀名为 .svg 的文件都转换为 React 组件，但是不会转换 node_modules 目录下的文件。
字体处理
有时候，SVG 图片文件中可能包含了字体相关的文件，如果我们不对这些文件进行处理，打包后的代码可能会出现问题。我们可以通过 fontFace 属性来进行处理：
reactSvg({
fontFace: true
})上面的配置将会将 SVG 图片中的字体文件提取出来，并在打包后的代码中添加字体文件相关的样式定义。
模板
如果需要对导入的 SVG 组件进行一些自定义操作，我们可以通过 template 属性来进行配置：
-- -------------------- ---- -------
----------
--------- -- -------- -- ----- - -------- -------------- ------ --- -- -- -
----- ------------- - ---------------- -------- -------------- ---
------ ------------------
------ - -- ----- ---- --------
------ ---------- ---- -------------------
----- ----------------- ------------------ - ------- -- -
------ -------
--
------ ------- -----------------
--
-
--上面的配置将会使用 TypeScript 模板来生成导入的 SVG 组件。
结语
通过以上介绍，相信你已经对 rollup-plugin-react-svg 有了一定的了解。该插件能够大大简化将 SVG 图片转换为 React 组件的过程，并可以对打包后的代码进行优化。如果你正在开发一个 React 项目，并需要使用大量的 SVG 图片，那么不妨尝试一下这个插件吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/161325