import { Card, Col, Row, Tabs } from 'antd'; import { data } from './icon'; export type IconPickerProps = { commit: (name: string) => void; }; export default (props: IconPickerProps) => { const iconData = () => { let iconList = JSON.parse(data); return [ { category: 'line', description: '线性图标', icons: iconList.slice(0, 284), }, { category: 'solid', description: '面性图标', icons: iconList.slice(284, 428), }, { category: 'office', description: '官方图标', icons: iconList.slice(428, 522), }, { category: 'other', description: '其它图标', icons: iconList.slice(522, iconList.length), }, ]; }; return ( <Tabs defaultActiveKey="direction"> {iconData().map((data) => ( <Tabs.TabPane tab={data.description} key={data.category}> <Card style={{ marginBottom: 24, overflow: 'auto', height: 250 }} bordered={false}> <Row gutter={24} style={{ fontSize: 28, textAlign: 'center', marginBottom: 20, cursor: 'pointer' }} > {data.icons.map((icon: any) => ( <Col span={4} key={icon} onClick={(e) => { props.commit(`icon-${icon.replace(/ /g, '')}`); }} > <span style={{ fontSize: 28 }} className={`iconfont icon-${icon.replace(/ /g, '')}`} ></span> </Col> ))} </Row> </Card> </Tabs.TabPane> ))} </Tabs> ); };

这段代码定义了一个名为 `IconPicker` 的组件，该组件接受一个名为 `commit` 的函数回调作为参数。该组件会根据传入的回调函数，将用户选择的图标名称作为参数，调用该函数。

组件的主要实现如下：

首先，定义一个 `iconData` 函数，用于返回一个包含图标数据的数组。该数组包含四个元素，每个元素都是一个对象，包括 `category`、`description` 和 `icons` 三个属性。其中，`category` 表示图标所属的分类，`description` 表示该分类的描述信息，`icons` 是一个包含多个图标名称的数组。

然后，使用 `Tabs` 组件将所有的图标分类展示在不同的选项卡中。对于每个选项卡，使用 `Card` 组件展示该分类下的图标列表。图标列表使用 `Row` 和 `Col` 组件进行排列，每个图标使用 `span` 元素展示，其 CSS 类名为 `iconfont icon-图标名称`，其中图标名称由 `data.icons` 数组中的元素拼接而成。

当用户点击某个图标时，会触发 `onClick` 事件，回调函数 `props.commit` 会被调用，并将对应的图标名称作为参数传入。

最后，将 `IconPicker` 组件导出，以供其他模块使用。