如何从 SVG 插图创建组件库

unDraw 是一个 MIT 许可的插图集合，适用于您可以想象和创建的每个项目。它是一个不断更新的精美 SVG 图像集合，您可以完全免费且无需署名地使用。

虽然 unDraw 仍然相当新，但其开源性质意味着它已经被一系列产品使用。它出现在新推出的设计指导网站 MentorOla 上，以及我自己正在开发的一个语言网站 Little Lingua 上

在使用 React 构建 Little Lingua 网站时，我发现将 SVG 转换为 React 组件使它们更容易管理，并且作为插图更具可定制性。

由于这种实用性，我想将 unDraw React 组件库作为一个开源 npm 包 发布，以便以简单的方式将 unDraw 的美丽带给最大的 JavaScript 受众。

来源：按数字显示的 JavaScript 框架

撰写《按数字显示的 JavaScript 框架》报告的 John Hannah

React 绝对占据主导地位。根据这些数据，它是迄今为止下载次数最多的……

将此包整合在一起的很多灵感来自 Miuki Miu 的项目 React Kawaii，她在其中做了大致相同的事情，甚至更多。

她的 文章概述了 SVG 作为 React 组件的整体概念，在这里我将更详细地介绍我自己的过程中涉及的内容，包括整合 Styleguideist 文档。以下是所有将涵盖的内容

1. 如何将 SVG 插图转换为可自定义的 React 组件
2. 如何使用 Styleguideist 生成简单、交互式的文档
3. 如何发布 npm 包（因为这是我第一次这样做）

1. SVG 插图作为 React 组件

当您访问 unDraw 时，您目前可以从网站上直接自定义每个 SVG 插图的主要颜色之一。

当您获取图像时获得的 SVG 下载在进一步自定义方面非常乏味，因为有很多颜色值需要更改。但是，如果该 SVG 转换为 React 组件，则会变得非常容易！比较这两者

从本质上讲，SVG 保存在一个 React 组件中，该组件非常易于交互。您只需将属性传递给组件（例如 skinColor/hairColor/primaryColor），然后将其散布到 SVG 中。

您只需三个步骤即可完成此操作

将 SVG 转换为 JSX

有一些很棒的工具可以将 SVG 转换为 React 组件的 render() 方法中使用的 JSX 代码。我使用的第一个工具也是我遇到的第一个工具：SVG to JSX——它也是第一个 Google 搜索结果😉。正如其名称所示，任何 JSX 代码都是根据您粘贴的任何 SVG 生成的。

获得 JSX 后，将其粘贴到您的 React 组件中，如下所示

import React from 'react';
import PropTypes from 'prop-types';
const UndrawDesigner = props => (
<svg id='780c6f38–12e9–4526–8343–95ef18389740' dataName='Layer 1' xmlns='http://www.w3.org/2000/svg'>
  // all your svg code
</svg>
);
export default UndrawDesigner;

就是这样！现在您可以通过将其放入代码中来使用它作为组件。

<UndrawDesigner/>

现在，您将只能使用 SVG 的默认颜色。让我们使这些颜色易于更改。

使用 Props 进行自定义

我们可以利用 React 的优势，通过添加 *props* 作为占位符来使插图可自定义，这些占位符用于填充组件中 SVG/JSX 的 *颜色属性*。

<svg xmlns='http://www.w3.org/2000/svg'>

  <path fill={props.hairColor} d='...' />
  <path fill={props.hairColor} d='...' />
  
  <ellipse fill={props.skinColor} cx='...' cy='...' rx='...' ry='...' />
  <ellipse fill={props.skinColor} cx='...' cy='...' rx='...' ry='...' />
  
  <!-- etc -->

</svg>

为了确保您替换了正确的填充属性，您可以在浏览器中打开 SVG，并使用浏览器的检查器工具识别颜色。

您可以看到此处的颜色为 rgb(226,189,149)。将其转换为十六进制代码。有很多方法可以做到这一点，一种是在 Google 中搜索“颜色选择器”。

由于单个颜色通常在 SVG 插图的许多地方使用（例如，左手、右手、脸部将相同），因此需要替换颜色的位置很多。要快速执行此操作，请获取十六进制代码，并在组件中执行 *查找和替换*，将颜色属性替换为您 props 的名称，例如 {props.skinColor}。

根据您希望自定义的 SVG 的颜色/元素数量执行此操作，确保您的 props 的命名方式易于其他人理解和使用。

添加 PropType 定义和默认颜色

添加完 props 后，最好将它们定义为 propTypes。这在为组件创建很棒的文档时也将有所帮助。像这样添加它们（确保您已在项目中安装了 prop-types）

UndrawDesigner.propTypes = {
/**
* Hex color
*/
skinColor: PropTypes.string,
/**
* Hex color
*/
hairColor: PropTypes.string,
/**
* Hex color
*/
primaryColor: PropTypes.string,
};

在导出语句之前，完成组件的定义，定义一些默认颜色。这确保了如果未将任何 props 传递给组件，将使用回退颜色。

UndrawDesigner.defaultProps = {
  skinColor: '#e2bd95',
  primaryColor:'#6c68fb',
  hairColor:'#222'
};
export default UndrawDesigner;

执行此操作后，您的组件将准备好接受为每个定义的属性提供的值。例如，在 UndrawDesigner 中，我们可以通过为皮肤和头发传递各种类型的灰色来制作一个小灰人。简单而不错。

确实如此简单。如果您想超越更改颜色，请 阅读 Miuki Miu 的文章，她在其中巧妙地添加了较小的 common 组件，这些组件用作较大组件的面部表情。

2. 制作样式指南

为了使 React 插图对每个人都更有用，可以使用 React Styleguidist 创建组件的动态样式指南。这也不是很多额外的工作。

由于 Stylguidist 如何与 React 一起使用，因此从我们拥有的组件创建文档非常简单。Styleguidist 需要两件主要事情才能从我们的组件生成文档。

1. 清晰的 PropType 定义
2. 组件示例

我们已经在上一节中解决了第一个问题。每个 PropType 定义上方的注释也很重要，因为它会在最终文档中显示。

添加组件示例也很简单——在组件文件夹中添加一个 Readme.md，其中包含如何使用它的示例。内容可能如下所示

// UndrawResponsive example
```js
<UndrawResponsive
height='250px'
primaryColor='#6c68fb'
accentColor='#43d1a0'
/>
```

您可以在 Styleguidist 文档 中了解更多信息。

一旦您将这两者都设置好，安装并运行 Styleguidist 将像魔法一样创建文档。请按照 此处的说明 进行安装和运行。

3. 发布 npm 包

在此阶段，我有一个包含 unDraw 插图的 React 组件文件夹，但它对任何其他项目都没有用。以下是我将其转换为 npm 模块的步骤。

1. 使用 Facebook 的 create-react-app 创建一个全新的 React 项目。
2. 将您想发布为 npm 模块的 React 组件复制到 creat-react-app 项目的 src/node_modules/components 中。
3. 按照 Pavel Lokhmakov 描述的 这些步骤。

最后，要发布您的模块，请 创建一个 npm 帐户 并按照 npm 文档中的这两个简短视频进行操作。

1. 如何创建 Node.js 模块
2. 如何发布和更新包

就是这样！unDraw 上有超过 100 个由 Katerina Limpitsouni 创建的 unDraw 插图。目前，我只在 unDraw npm 包中添加了其中的一小部分，但每周都会添加更多。

查看 GitHub 仓库。我很快也会发布 LittleLingua 的代码，该网站使用了这个 unDraw npm 包。它使用 unDraw 的生产就绪的 MIT 许可主题构建，称为 evie，我也将其转换为 React 组件。

要了解有关将 SVG 插图转换为组件的更多信息，请查看 Elizabet Oliveira 关于她的副项目 React Kawaii 的演讲，该项目也获得了 React Amsterdam 开源奖 的“年度最佳趣味副项目”提名。