fix: TabPane should support closeIcon

fix ant-design/ant-design#24639

README.md

@@ -95,6 +95,7 @@ React.render(
 | key | string | - | corresponding to activeKey, should be unique |
 | forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs |
 | tab | ReactNode | - | current tab's title corresponding to current tabPane |
+| closeIcon | ReactNode | - | Config close icon |
 
 ## Development
 

src/TabNavList/TabNode.tsx

@@ -28,7 +28,7 @@ function TabNode(
     id,
     active,
     rtl,
-    tab: { key, tab, disabled },
+    tab: { key, tab, disabled, closeIcon },
     tabBarGutter,
     tabPosition,
     closable,
@@ -99,7 +99,7 @@ function TabNode(
             }
           }}
         >
-          {editable.removeIcon || '×'}
+          {closeIcon || editable.removeIcon || '×'}
         </span>
       )}
     </button>

src/sugar/TabPane.tsx

@@ -8,6 +8,7 @@ export interface TabPaneProps {
   children?: React.ReactNode;
   forceRender?: boolean;
   closable?: boolean;
+  closeIcon?: React.ReactNode;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

tests/index.test.tsx

@@ -185,6 +185,22 @@ describe('Tabs.Basic', () => {
         });
       });
     });
+
+    it('customize closeIcon', () => {
+      const onEdit = jest.fn();
+      const wrapper = mount(
+        getTabs({
+          editable: { onEdit },
+          children: [
+            <TabPane tab="light" closeIcon={<span className="close-light" />}>
+              Light
+            </TabPane>,
+          ],
+        }),
+      );
+
+      expect(wrapper.find('.rc-tabs-tab-remove').find('.close-light').length).toBeTruthy();
+    });
   });
 
   it('extra', () => {