antd tabs自定义图标

Ant Design (antd) 的 Tabs 组件允许开发者通过 `tabBar` 属性来自定义每个标签页的图标。`tabBar` 是一个数组，其中每个元素都包含四个属性：`label`、`icon`、`children` 和 `active`。

1. `label`：通常是标签的文字内容。
2. `icon`：可以是一个字符串，表示 React 元素路径（如 `'anticon.anticon-setting'`），也可以是一个 React 元素本身。
3. `children`：通常用于显示更复杂的图标组件或按钮组。
4. `active`：标记当前激活的标签页，设置为 `true` 时，对应的图标会显示为高亮状态。

例如：

import { Tab, AntdIcon } from 'antd';
import './style.css'; // 如果需要自定义样式

const icons = [
  {
    label: '选项一',
    icon: <AntdIcon type="setting" />, // 使用内置Ant Design图标
    children: null,
    active: false,
  },
  {
    label: '选项二',
    icon: 'your-custom-icon', // 自定义字符串路径，假设你有一个名为 `customIcon.js` 的文件导出了这个图标
    active: true,
  },
];

const CustomIconsTabs = () => (
  <Tab tabBar={icons} defaultActiveKey="1">
    {/* 内容区域 */}
  </Tab>
);

export default CustomIconsTabs;

如果你有额外的自定义图标React组件，你可以直接传递给`icon`属性：

{
  label: '选项三',
  icon: <YourCustomComponent />,
  ...
}