diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index b1f835a2b5..2238604168 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3244,7 +3244,9 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
role="tab"
tabindex="0"
>
-
+
+
+
Tab 1
@@ -3280,7 +3284,9 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
role="tab"
tabindex="0"
>
-
+
+
+
Tab 2
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
index 35ea6062dc..318ed33a8a 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
@@ -2709,7 +2709,9 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
role="tab"
tabindex="0"
>
-
+
+
+
Tab
1
@@ -2745,7 +2749,9 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
role="tab"
tabindex="0"
>
-
+
+
+
Tab
2
diff --git a/components/tabs/demo/icon.tsx b/components/tabs/demo/icon.tsx
index 599618da08..70bd0a1990 100644
--- a/components/tabs/demo/icon.tsx
+++ b/components/tabs/demo/icon.tsx
@@ -7,16 +7,11 @@ const App: React.FC = () => (
defaultActiveKey="2"
items={[AppleOutlined, AndroidOutlined].map((Icon, i) => {
const id = String(i + 1);
-
return {
- label: (
-
-
- Tab {id}
-
- ),
+ label: Tab {id},
key: id,
children: `Tab ${id}`,
+ icon: ,
};
})}
/>
diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md
index 009848a7bf..fced5e1c36 100644
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@@ -82,6 +82,7 @@ More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | |
| key | TabPane's key | string | - | |
| label | TabPane's head display text | ReactNode | - | |
+| icon | TabPane's head display icon | ReactNode | - | 5.12.0 |
| children | TabPane's head display content | ReactNode | - | |
| closable | Whether a close (x) button is visible, Only works while `type="editable-card"` | boolean | true | |
diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
index 273fc46fe9..bbbd3b9490 100644
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@@ -84,6 +84,7 @@ Ant Design 依次提供了三级选项卡,分别用于不同的场景。
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
| key | 对应 activeKey | string | - | |
| label | 选项卡头显示文字 | ReactNode | - | |
+| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
| children | 选项卡头显示内容 | ReactNode | - | |
| closable | 是否显示选项卡的关闭按钮,在 `type="editable-card"` 时有效 | boolean | true | |
diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts
index a9ba7c13ba..9670fd30a4 100644
--- a/components/tabs/style/index.ts
+++ b/components/tabs/style/index.ts
@@ -691,6 +691,9 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => {
'&-btn': {
outline: 'none',
transition: 'all 0.3s',
+ [`${tabCls}-icon:not(:last-child)`]: {
+ marginInlineEnd: token.marginSM,
+ },
},
'&-remove': {
flex: 'none',
@@ -734,7 +737,7 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => {
[`& ${tabCls}-remove ${iconCls}`]: {
margin: 0,
},
- [iconCls]: {
+ [`${iconCls}:not(:last-child)`]: {
marginRight: {
_skip_check_: true,
value: token.marginSM,
diff --git a/package.json b/package.json
index f7e84caf0d..c45719d662 100644
--- a/package.json
+++ b/package.json
@@ -151,7 +151,7 @@
"rc-steps": "~6.0.1",
"rc-switch": "~4.1.0",
"rc-table": "~7.36.0",
- "rc-tabs": "~12.13.1",
+ "rc-tabs": "~12.14.1",
"rc-textarea": "~1.5.3",
"rc-tooltip": "~6.1.2",
"rc-tree": "~5.8.2",