使用 @productboard/svg-componentify：将 SVG 图形转化为可复用的组件-JavaScript中文网-JavaScript教程资源分享门户

前言

作为前端开发人员，我们一直在使用各种类型的图形。SVG 矢量图形尤其流行，不仅因为它们比传统的位图图像更清晰、更灵活，而且它们的代码可读性也非常好。

但是，使用 SVG 可能会变得棘手，特别是在多页面项目中。尤其是当一个组件需要多次使用时，复制和粘贴代码通常不是最佳实践。这就是 @productboard/svg-componentify 能够解决的问题。

在本文中，我们将提供一份详细的指南，以便使用这个 npm 包在您的项目中将 SVG 图形转化为可复用的组件。

什么是 @productboard/svg-componentify？

@productboard/svg-componentify 是一个 npm 包，可以将 SVG 文件转化为 React 组件，还可以指定传递给组件的属性。

我们将使用类似于以下 SVG 代码的示例：

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path fill="#FF9900" fill-rule="evenodd" d="M0 12a1.5 1.5 0 013 0v6a1.5 1.5 0 01-3 0zM12 0a1.5 1.5 0 00-1.5 1.5v18A1.5 1.5 0 0012 21a1.5 1.5 0 001.5-1.5V1.5A1.5 1.5 0 0012 0z"/>
</svg>

使用我们的包，我们将能够将此代码转换为使用 React 创建的复用组件。

安装和使用

使用 npm 安装 @productboard/svg-componentify：

npm install @productboard/svg-componentify --save-dev

我们将使用它来创建 React 组件，因此我们需要确保 React 已在项目中安装。

创建 SVG 组件

要使用 @productboard/svg-componentify，我们首先需要将 SVG 文件作为模块导入至项目中。

在我们的示例中，我们将使用名为 icon.svg 的 SVG 文件。在此处，假设您已经在项目中导入了它。

在导入文件后，我们需要将其转化为 React 组件。我们可以使用以下代码来完成此工作：

import svgComponentify from "@productboard/svg-componentify";
import { ReactComponent as IconSVG } from "./icon.svg";

const Icon = svgComponentify(IconSVG);

在这个例子中，我们首先导入了svgComponentify模块和读取 SVG 文件的 <ReactComponent>。我们接着将 <ReactComponent> 传递给 svgComponentify() 函数，并将它的返回值赋给我们的 Icon 变量。这个变量就是我们新创建的 SVG React 组件。

我们可以在 React DOM 内使用这个组件，就像这样：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Icon viewBox="0 0 24 24" fill="#FF9900" />,
  document.getElementById('root')
);

在这个示例中，我们将属性 viewBox 和 fill 直接传给 svg 组件。我们创建了一个 div，id 为 'root'，并将渲染结果传递给此 div。

现在，我们就已经成功地将我们的 SVG 文件转化为可复用的组件了。但是，我们还可以进一步改进这个组件。

自定义 SVG 属性

@productboard/svg-componentify 还允许我们在导入 SVG 文件时指定一些属性。我们可以使用这些属性来自定义组件的外观和行为特性。

与之前的示例相同，我们需要先将 SVG 文件导入到项目中。但是，在这种情况下，我们将改为向 <ReactComponent> 内添加一些属性，如 aria-labelledby 和 role。

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-labelledby="icon-title-1" role="img">
  <title id="icon-title-1">An example icon</title>
  <path fill="#FF9900" fill-rule="evenodd" d="M0 12a1.5 1.5 0 013 0v6a1.5 1.5 0 01-3 0zM12 0a1.5 1.5 0 00-1.5 1.5v18A1.5 1.5 0 0012 21a1.5 1.5 0 001.5-1.5V1.5A1.5 1.5 0 0012 0z"/>
</svg>

在 SVG 文件的顶部，我们为这个图标创建了一个具有 id 属性的 title 标签。我们还将 aria-labelledby 和 role 属性添加到了 SVG 元素上。

现在，当我们将 SVG 文件导入 React 组件时，我们可以使用 props 对象来添加自定义属性，如下所示：

import svgComponentify from "@productboard/svg-componentify";
import { ReactComponent as IconSVG } from "./icon.svg";

const Icon = svgComponentify(IconSVG, {
  ariaLabelledby: "icon-title-1",
  role: "presentation"
});

在这个示例中，我们将 aria-labelledby 值 (icon-title-1) 和 role 属性 (presentation) 添加到了自定义属性中。

自定义属性允许我们更好地控制组件外观，并且非常实用。

自定义属性名称

有时候SVG元素的属性名称与React元素的属性名称不同。例如，在SVG中，使用 viewBox 属性以显示SVG元素的内容。但是，在 React 中，我们需要使用 viewBox 属性来指定SVG组件的坐标系统。

为了解决这个问题，我们可以在导入 SVG 文件时指定自定义属性名称。我们可以使用以下代码将 viewBox 属性重命名为 svgViewBox 属性：

import svgComponentify from "@productboard/svg-componentify";
import { ReactComponent as IconSVG } from "./icon.svg";

const Icon = svgComponentify(IconSVG, {}, {
  viewBox: "svgViewBox"
});

在这个示例中，我们创建了一个新的属性 svgViewBox 。这个名称将覆盖SVG元素中原始的viewBox属性。

现在，我们可以在 React DOM 中按照如下方式使用此组件：

<Icon svgViewBox="0 0 24 24" fill="red" />

有时更改此类标记可以更好地控制 SVG 元素的外观。

总结

使用 @productboard/svg-componentify，我们可以轻松将 SVG 图像转化为可重用的 React 组件。它减少了复制和粘贴代码的需要，允许您指定自定义属性，甚至允许您使用自定义属性名称来更好地控制 SVG 元素的外观。

我们希望这篇文章可以帮助您更好的使用 @productboard/svg-componentify。现在，您可以开始将您的 SVG 图像转化为可复用的 React 组件了！

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