背景
SVG 是一种矢量图形标准，它的优点就是可以在任意尺寸下无失真，而缺点则是难以编辑和交互。由于在前端中，尤其是在 React 应用中使用 SVG 的需求量越来越大，因此产生了一些 SVG 编辑器和转换器。
其中一个使用最广泛的是 @svgr/core，它可以将 SVG 转换为 React 组件。当然，如果需要在 Rollup 构建环境下使用它，还需要使用 @svgr/rollup 这个 npm 包来进行转换和优化。因此，本文将介绍如何使用 @svgr/rollup 这个 npm 包来构建 Rollup 环境下的 SVG 转换。
安装
首先，我们需要安装 @svgr/core 和 @svgr/rollup 这两个 npm 包：
--- ------- ---------- ---------- ------------
我们还需要安装 rollup-plugin-svgr 这个 Rollup 插件来将 SVG 文件转换为 React 组件：
--- ------- ---------- ------------------
使用
在 Rollup 配置文件中，我们需要引入 rollup-plugin-svgr 并配置它：
------ ---- ---- ---------------------
------ ------- -
-- --- ---- ---
-------- -
-------
-- --- ---- ---
--
--这样，我们就可以在 Rollup 环境下使用 @svgr/core 来转换 SVG 文件，并将它们作为 React 组件打包到我们的应用中了。
指南
在 SVG 文件中添加
<svg>标签在使用
@svgr/rollup转换 SVG 文件时，它会将整个 SVG 图像都解析为 React 组件。因此，我们需要在 SVG 文件中添加<svg>标签来确保整个图像都能被转换：---- ---------------------------------- ---------- ----------- ---------- - -- ---- ---- --- -- --- -- --- --- ------
使用
svgrProps属性来配置生成的组件我们可以在 SVG 文件中使用
svgrProps属性来配置生成的组件。例如，我们可以添加一个title属性来为 SVG 图像添加标题：---- ---------------------------------- ------------ ------ --- --- ------ -- ---------- - -- ---- ---- --- -- --- -- --- --- ------
使用
svgrOptions对象来配置@svgr/core的选项我们可以使用
svgrOptions对象来配置@svgr/core的选项。例如，我们可以将svgrOptions.dimensions设置为false来禁用自动计算 SVG 图像的宽度和高度：------ ------------ - ----------- ------ -- ---在项目中使用转换后的组件
当 SVG 文件被转换为 React 组件后，我们可以像使用任何其他 React 组件一样来使用它们。例如，在 React 组件中使用转换后的 SVG 组件：
------ ----- ---- -------------------- -------- ------------- - ------ - ----- ------ -- ------ -- -
示例代码
在本示例代码中，我们将一个 SVG 图像转换为 React 组件，并在 Rollup 环境下打包它们。
SVG 文件
我们的 SVG 文件包含一个简单的圆形，如下所示：
---- ---------------------------------- ------------ ------ --- ------- -- ---------- - --- ----- ------- ------- ------- ------ ---------- -- ------
React 组件
在 React 组件中，我们导入转换后的 SVG 组件，并将它们渲染到页面上：
------ ----- ---- --------
------ -------- ---- ------------
------ -------- ---- ------------------
-------- ----- -
------ -
-----
--------- --
------
--
-
-------------------- --- ---------------------------------Rollup 配置文件
在 Rollup 配置文件中，我们需要使用 rollup-plugin-svgr 来转换 SVG 文件，并将生成的组件打包到输出的 JavaScript 文件中：
------ ---- ---- ---------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
-------
--
--结语
在本文中，我们介绍了如何使用 @svgr/core 和 @svgr/rollup 这两个 npm 包来在 Rollup 环境下进行 SVG 转换。我们还提供了一些使用指南和示例代码，希望这篇文章能够帮助你更好地理解和应用这些技术。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/96208