npm 包 @svgr/rollup 使用教程-JavaScript中文网-JavaScript教程资源分享门户

背景

SVG 是一种矢量图形标准，它的优点就是可以在任意尺寸下无失真，而缺点则是难以编辑和交互。由于在前端中，尤其是在 React 应用中使用 SVG 的需求量越来越大，因此产生了一些 SVG 编辑器和转换器。

其中一个使用最广泛的是 @svgr/core，它可以将 SVG 转换为 React 组件。当然，如果需要在 Rollup 构建环境下使用它，还需要使用 @svgr/rollup 这个 npm 包来进行转换和优化。因此，本文将介绍如何使用 @svgr/rollup 这个 npm 包来构建 Rollup 环境下的 SVG 转换。

安装

首先，我们需要安装 @svgr/core 和 @svgr/rollup 这两个 npm 包：

npm install --save-dev @svgr/core @svgr/rollup

我们还需要安装 rollup-plugin-svgr 这个 Rollup 插件来将 SVG 文件转换为 React 组件：

npm install --save-dev rollup-plugin-svgr

使用

在 Rollup 配置文件中，我们需要引入 rollup-plugin-svgr 并配置它：

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

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

这样，我们就可以在 Rollup 环境下使用 @svgr/core 来转换 SVG 文件，并将它们作为 React 组件打包到我们的应用中了。

指南

在 SVG 文件中添加 <svg> 标签

在使用 @svgr/rollup 转换 SVG 文件时，它会将整个 SVG 图像都解析为 React 组件。因此，我们需要在 SVG 文件中添加 <svg> 标签来确保整个图像都能被转换：
```
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  
</svg>
```
使用 svgrProps 属性来配置生成的组件

我们可以在 SVG 文件中使用 svgrProps 属性来配置生成的组件。例如，我们可以添加一个 title 属性来为 SVG 图像添加标题：
```
<svg xmlns="http://www.w3.org/2000/svg" svgrProps={{ title: 'My SVG Image' }} viewBox="0 0 16 16">
  
</svg>
```
使用 svgrOptions 对象来配置 @svgr/core 的选项

我们可以使用 svgrOptions 对象来配置 @svgr/core 的选项。例如，我们可以将 svgrOptions.dimensions 设置为 false 来禁用自动计算 SVG 图像的宽度和高度：
```
svgr({
  svgrOptions: {
    dimensions: false,
  },
}),
```
在项目中使用转换后的组件

当 SVG 文件被转换为 React 组件后，我们可以像使用任何其他 React 组件一样来使用它们。例如，在 React 组件中使用转换后的 SVG 组件：
```
-- -------------------- ---- -------
------ ----- ---- --------------------

-------- ------------- -
  ------ -
    -----
      ------ --
    ------
  --
-
```

示例代码

在本示例代码中，我们将一个 SVG 图像转换为 React 组件，并在 Rollup 环境下打包它们。

SVG 文件

我们的 SVG 文件包含一个简单的圆形，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" svgrProps={{ title: 'My Circle' }} viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red" />
</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