npm 包 rollup-plugin-svg-to-jsx 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在 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:

npm install rollup -g

在项目中安装 rollup-plugin-svg-to-jsx：

npm install rollup-plugin-svg-to-jsx --save-dev

在项目的 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 文件:

<!-- example.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" />
</svg>

通过 rollup-plugin-svg-to-jsx 将 example.svg 转换为 React 组件：

-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- ----------------

----- --- - -- -- -
    -----
        ------- -- --- ---------
        ---- --
    ------
--

------ ------- ----

结论

使用 rollup-plugin-svg-to-jsx 可以方便地将 SVG 图片转换为可在 React 中使用的组件。同时，由于 rollup 的优秀性能，它也可以不影响项目构建的速度。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e02c6