【从0-1实现一个组件库（3）】实现一个 Icon

使用 pnpm+vite+ts+tailwind 开发的 React 组件库， 采用 monorepo 组织，文档站使用 Docusaurus 构建

文档站在线地址：dance.cosine.ren/

Github 地址：github.com/dancing-tea…

NPM 包：www.npmjs.com/package/@da…

前言：笔者参加了字节青训营，但由于实习，对组内贡献不多，故想要做一整套的实现文档作为补充生态，如有写的可以改进的，不完备的地方，希望各位能够指出。

往期链接：

1. 【从0-1实现组件系列（1）】实现一个 Tag 组件
2. # 【从0-1实现一个组件库（2）】实现一个 Button

首先聊聊 Icon 的功能，也就是我们要实现什么

这是利用 iconfont 下载下来的 js，以 symbol 形式引用，因此会根据当前字体颜色和大小改变 icon 的颜色和大小。

这是我们提供的所有图标的类型；如果有实现更多图标的需要可以在IconFont 下载

再来聊聊具体的设计与实现

我们先来看看相关的配置，也就是我们暴露的接口吧

export type IconProps = {
    /** 图标唯一类型 */
    type: IconType
    /** 图标点击事件 */
    onClick?: (e: React.MouseEvent<SVGElement>) => void
    /** 图标显示与否 */
    show?: boolean
    /** 图标链接 */
    href?: string
    /** 组件额外的 CSS className */
    className?: string
    /** 组件额外的 CSS style */
    style?: React.CSSProperties
    /** 自定义图标来源 若自定义则不按照图标类型来 */
    iconUrl?: string
}

其中 type 是用来选择是哪个图标的，因为我们提供了如下枚举。

export enum IconType {
    LOADING = 'loading',
    SEARCH = 'search',
    CLOSE = 'close',
    DELETE = 'delete',
    ARROW = 'arrow',
    ARROW_2 = 'arrow-2',
    DATE_PICKER = 'datepicker',
}

type 会在我们渲染的时候进行使用，所进行的使用如下：

而 onClick 则是暴露出来的点击事件， style 则是暴露出来展示样式的，href 是图标的链接，点击会打开一个新页面展示图标（如果你设置的话）

className 则是组件额外的类名，可以进行设置

属性	说明	类型	是否可选	默认值
type	图标唯一类型	IconType	否	-
onClick	图标点击事件	(e: React.MouseEvent) => void	是	-
show	图标显示与否	boolean	是	true
href	图标链接	string	是	-
className	组件额外的 CSS className	string	是	-
style	组件额外的 CSS style	React.CSSProperties	是	-
iconUrl	自定义图标来源 若自定义则不按照图标类型来	string	是	-

暴露出来的一些属性聊完了，让我们再来聊聊具体的设计与实现

1. 对于 Click 事件的特殊处理

const _onClick = useCallback(
    (e: React.MouseEvent<SVGElement>): void => {
        onClick?.(e)
        href && window?.open(href, '_blank')
       },
      [href, onClick],
   )

如果存在 href ，还需要单独开一个窗口做展示。

1. 进行的二级封装

这边还需要设置一个初始值：

Icon.defaultProps = {
    show: true,
}

那么这就是本节的全部内容了，下面我会把全部代码贴上。

代码链接