手把手教你搭建 React UI 组件库（二）：实现 Icon 组件（上）

2023-12-02 03:09:32

引言

在构建一个现代而全面 React 应用时，高质量的 UI 组件库至关重要。它不仅可以简化开发流程，还可以确保组件的一致性和可重用性。在本系列文章的第二部分中，我们将深入探讨如何从头开始构建一个 React UI 组件库，重点是实现 Icon 组件。

为什么要使用 Icon 组件？

图标在现代 UI 中无处不在，它们可以增强用户体验、简化导航并为应用程序增添视觉吸引力。通过使用可重用的 Icon 组件，我们可以轻松地将图标整合到我们的应用程序中，同时保持代码的简洁和一致性。

从头开始构建 Icon 组件

第一步：定义 API

首先，让我们定义我们 Icon 组件的 API。在我们的示例中，Icon 组件将接受一个 required 的 iconName prop 和一个可选的 size prop。

// Icon.tsx
interface IconProps {
  iconName: string;
  size?: string;
}

第二步：渲染基础文本图标

我们的第一个目标是渲染一个最简单的文本图标。为此，我们需要创建一个新的文件 @/lib/Icon/index.tsx（其中 @ 表示项目根目录）。

// Icon.tsx
import * as React from "react";

export const Icon: React.FC<IconProps> = ({ iconName, size }) => {
  return (
    <span style={{ fontSize: size ? size : "16px" }}>{iconName}</span>
  );
};

第三步：导入并使用我们的 Icon 组件

现在我们已经定义了我们的 Icon 组件，是时候导入并使用它了。让我们创建一个新组件 App.tsx 作为我们应用程序的入口点。

// App.tsx
import React from "react";
import { Icon } from "./lib/Icon";

export const App: React.FC = () => {
  return (
    <div>
      <Icon iconName="home" size="24px" />
      <Icon iconName="settings" />
    </div>
  );
};