在 Web 开发中，使用 SVG 图片已经成为了比较常见的方式。使用 SVG 图片的好处是可以在任意大小下保证图像质量的清晰且适应性强。而在前端开发者的开发过程中，可能会面临需要将 SVG 图片转换成 React 组件的需求。这时候，我们就可以使用 rollup-plugin-svg-to-jsx 插件来完成这个转换过程。
什么是 rollup-plugin-svg-to-jsx
rollup-plugin-svg-to-jsx 是 rollup 的插件之一，它可以将 SVG 图片转换成 React 组件，支持 ES6 模块化以及多个 SVG 文件处理。它使用了 babel-plugin-jsx-svg 插件的转换能力。
使用 rollup-plugin-svg-to-jsx
在项目中使用 rollup-plugin-svg-to-jsx，需按照以下步骤操作：
- 全局安装 rollup:
--- ------- ------ --
- 在项目中安装 rollup-plugin-svg-to-jsx：
--- ------- ------------------------ ----------
- 在项目的
rollup.config.js中引入 rollup-plugin-svg-to-jsx：
------ -------- ---- ---------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
-----------
--
--配置
rollup-plugin-svg-to-jsx 支持以下选项进行配置：
wrapConditionals: boolean，用于在 SVG 组件中包装条件语句（默认 true）。functionName: string，生成的函数名称（默认SVG）。format: string，生成的编译类型（默认es）。
示例代码
在以下代码中，我们将演示如何使用 rollup-plugin-svg-to-jsx 将 SVG 图像转换为 React 组件。
一个 SVG 文件:
---- ----------- --- ---- ---------------------------------- ---------- - --- ----- ------- ------- ------- ------ -- ------
通过 rollup-plugin-svg-to-jsx 将 example.svg 转换为 React 组件：
------ ----- ---- --------
------ --- ---- ----------------
----- --- - -- -- -
-----
------- -- --- ---------
---- --
------
--
------ ------- ----结论
使用 rollup-plugin-svg-to-jsx 可以方便地将 SVG 图片转换为可在 React 中使用的组件。同时，由于 rollup 的优秀性能，它也可以不影响项目构建的速度。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562d581e8991b448e02c6