构建和分享React SVG图标组件

前端小工
327 阅读8分钟

使用比特创建可扩展、可测试、可共享和独立的SVG React组件

所有现代的应用程序都使用图像资产。

例如，一个应用程序可能有一个标志，在多个地方使用不同颜色和尺寸的一个图像。在这种情况下，开发者会将标志隔离在一个单独的组件中，并对其属性进行自定义。这种情况增加了它的可重用性和可定制性。

但是，跨项目共享这些组件是很麻烦的。它造成的问题有以下几点。

  1. 开发人员必须在多个存储库（项目）中维护组件的副本。
  2. 在许多地方进行修改是很困难的。如果一个地方没有被改变，就会导致UI的不一致。

然而，独立组件被用来解决上面讨论的开发者在开发图标组件时遇到的问题，并彻底改变了这种构建项目的方式。

因此，本文将探讨独立组件以及开发者如何利用Bit来实现和分享独立的React SVG图标组件。

独立组件

一个组件只不过是一个复杂程度不同的文件，为一个单一的目的服务。它可以是一个React、Angular组件，甚至是一个Node.js模块（或任何东西）。

独立组件是一种独立开发、协作和版本的组件类型。例如，用户可以在不启动整个应用程序的情况下开发部分应用程序。

这种状态为开发网络应用引入了真正的模块化方法，因为开发者可以独立地创建组件，并在多个项目中分享它们，而不会重复一个代码。

正因为如此，独立组件为应用程序增加了更多的健壮性。

为什么使用独立组件来开发SVG图标组件？

在构建SVG图标时，通常在整个应用程序中使用一个版本的图标，而不管平台如何。例如，你可能有一个React和一个React Native版本的示例应用程序，使用相同的SVG资产，但有不同的变化。在这样的情况下，使用普通的老式组件将无法帮助你，因为你必须为每个项目复制每个图标来使用它。

对于这种情况，创建可共享的独立组件是最好的选择。

用Bit建立一个独立的SVG图标

Bit是一个免费的开源工具，它允许你在多个项目中有效地建立和共享独立的组件。

让我们用Bit构建一个独立的、可共享的React SVG图标。

前提条件

要开始了。

  1. 在Bit Cloud上创建一个免费账户。我们稍后将使用它来导出SVG图标。
  2. 安装Node.js。确保安装最新的版本。
  3. 使用命令npx @teambit/bvm install来安装Bit CLI。

执行命令bit -v来确认你的安装。

图01：成功安装Bit CLI

创建一个新的Bit工作区

安装完Bit CLI后，需要一个新的Bit工作区来创建、测试和共享独立组件。

运行以下命令，用React模板初始化一个Bit工作区。

bit new react first-workspace

你应该看到如下所示的输出。

图02 - 创建一个新的Bit工作区

之后，导航到新创建的工作空间，运行bit start命令来启动开发（UI）服务器。

图03 - 启动开发服务器后的预期输出

在Bit中创建一个新的组件

在你成功配置了Bit工作空间后，你可以继续并开始开发一个SVG图标，作为一个独立的组件。

幸运的是，Bit CLI有一个内置命令，可以帮助我们生成一个模板式的React组件。

让我们运行 bit create react ui/app-logo 命令。这个命令将创建一个名为 "app-logo "的组件，你的文件目录应该如下所示。

.

使用比特的组件独立性

在开发之前，了解Bit的组件独立性是很关键的。这可以通过观察Bit CLI生成的四个关键文件来完成。

  1. Boilerplate Component（***.tsx****）。**帮助创建组件
  2. 组件文档（***.mdx****）。**帮助记录该组件
  3. 测试文件（***.spec.tsx****）。**帮助运行该组件的单元测试
  4. 可能的组件变化（***.composition.tsx****）。**帮助声明组件的可能组合。

每一个用Bit创建的组件都会在一个特定的目录下（以组件命名）生成这些文件。这四个文件帮助用户独立地创建、记录和测试该组件。

开发SVG图标组件样本

要开始，浏览app-logo.tsx。打开该文件并添加下面的代码。

import React, { FC } from 'react';

export type AppLogoProps = {

export const AppLogo: FC<AppLogoProps> = (props) => {

AppLogo.defaultProps = {

上面的代码片段创建了一个独立的、可重复使用的、可定制的应用程序标志组件。这是消费者根据他们的要求定制的基本构建块。

查看SVG图标样本

我们可以在app-logo.compositions.tsx文件中定义组合来观察组件的使用。在声明组合时，总是尝试列出组件的可能变化。例如，让我们尝试为SVG图标组件添加可能的组合，在组合文件中添加如下所示的代码。

import React from 'react';

export const BasicAppLogo = () => {

export const MiniApplicationLogo = () => {

export const BlackApplicationLogo = () => {

添加完组合后，保存所有的修改，然后访问http://localhost:3000，查看比特工作区。你应该看到SVG图标组件和定义的组合被添加到本地工作区。

图04 - 观察SVG图标的构图

对SVG进行单元测试

通常情况下，当一个组件被部署到应用程序中时，它就会被测试。因此，许多组件只在QA或后期阶段被测试。

但是有了Bit，你可以为所需的组件编写测试任务，以确保当其他人使用该组件时，该组件是没有错误的。

要定义一个测试任务，请导航到app-logo.spec.ts，并添加如下所示代码。

import React from 'react';

it('should render BasicAppLogo with the default fill color', () => {

上面定义的测试任务渲染BasicAppLogo组件，并检查ID为 "fill-rectangle "的元素的填充颜色是否为 "rgb(98.429871%, 81.959534%, 37.649536%)"。ID为 "fill-rectangle "的元素之前已在SVG图标组件中定义。

要在比特中执行测试，请运行比特测试。

图05 - 测试独立组件

导出组件

在开发和测试完该组件后，可以将其导出到一个远程范围，供其他开发者协作和使用。

然而，在导出之前，我们必须对组件的版本进行标记。Bit允许你对每个组件的单独版本进行标记，并确保每个组件的完全独立性。

  • 运行bit tag --all来标记SVG Icon组件。

之后，你可以通过运行bit export命令将该组件导出到一个远程范围。在你导出之前。

  1. 确保使用 bit login 命令登录到 Bit Cloud。
  2. 确保创建一个与本地作用域同名的远程作用域。

导出后，你可以访问比特云并查看导出的SVG图标。

图06：在比特云上导出组件

在项目中使用SVG图标组件

在成功开发并分享SVG组件到远程范围后，其他开发者可以开始协作并使用你的SVG图标。

让我们使用npx create-react-app test-react-app --template typescript来创建一个React示例应用程序，以演示独立SVG Icon组件的使用。

创建完样本应用程序后，执行下面的命令，将Bit组件添加到应用程序中。

npm i @lakinduhewawasam/first-workspace.ui.app-logo

然后，导航到App.js，添加如下所示的代码。

import './App.css';

function App() {

export default App;

上面显示的代码片段消耗了我们之前开发的独立SVG组件。结果是，它生成了下图所示的输出。

图07：在真实世界的应用中观察SVG的情况

这就是你如何创建一个独立的组件并使用Bit来分享它。

不要建立网络单体。使用 比特来创建和组成解耦的软件组件--在你喜欢的框架中，如React或Node。构建可扩展和模块化的应用程序，拥有强大和愉快的开发体验。

把你的团队带到 比特云来托管并共同协作开发组件，并作为一个团队加快、扩大和规范开发。尝试用设计系统 或微前端的可组合前端，或探索用服务器端组件的可组合后端。

试一试吧→

结语

本文介绍了独立组件及其用法，并深入介绍了如何使用Bit创建可扩展、可测试和独立的SVG React组件，这些组件可以在多个项目中有效共享。

文章中使用的Bit工作区可以在我的GitHub仓库中找到。此外，我们为这个项目创建的远程范围可以在我的比特云工作区中访问，为说明SVG图标组件的使用而创建的React应用样本也可以在这个资源库中访问。

我确实希望你认为这篇文章对你有帮助。

谢谢你的阅读。

了解更多

构建和共享React SVG图标组件》最初发表在《Bits and Pieces》杂志上，人们通过强调和回应这个故事来继续对话。

avatar
文章
阅读
粉丝