feat: add icon element props for semantic

src/TabNavList/TabNode.tsx

@@ -23,8 +23,14 @@ export interface TabNodeProps {
   onMouseUp: React.MouseEventHandler;
   onFocus: React.FocusEventHandler;
   onBlur: React.FocusEventHandler;
-  style?: React.CSSProperties;
-  className?: string;
+  styles?: {
+    root?: React.CSSProperties;
+    icon?: React.CSSProperties;
+  };
+  classNames?: {
+    root?: string;
+    icon?: string;
+  };
 }
 
 const TabNode: React.FC<TabNodeProps> = props => {
@@ -44,8 +50,8 @@ const TabNode: React.FC<TabNodeProps> = props => {
     onKeyDown,
     onMouseDown,
     onMouseUp,
-    style,
-    className,
+    styles,
+    classNames,
     tabCount,
     currentPosition,
   } = props;
@@ -83,13 +89,13 @@ const TabNode: React.FC<TabNodeProps> = props => {
     <div
       key={key}
       data-node-key={genDataNodeKey(key)}
-      className={clsx(tabPrefix, className, {
+      className={clsx(tabPrefix, classNames?.root, {
         [`${tabPrefix}-with-remove`]: removable,
         [`${tabPrefix}-active`]: active,
         [`${tabPrefix}-disabled`]: disabled,
         [`${tabPrefix}-focus`]: focus,
       })}
-      style={style}
+      style={styles.root}
       onClick={onInternalClick}
     >
       {/* Primary Tab Button */}
@@ -120,7 +126,11 @@ const TabNode: React.FC<TabNodeProps> = props => {
             {`Tab ${currentPosition} of ${tabCount}`}
           </div>
         )}
-        {icon && <span className={`${tabPrefix}-icon`}>{icon}</span>}
+        {icon && (
+          <span className={clsx(`${tabPrefix}-icon`, classNames?.icon)} style={styles.icon}>
+            {icon}
+          </span>
+        )}
         {label && labelNode}
       </div>
 

src/TabNavList/index.tsx

@@ -436,9 +436,15 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
         prefixCls={prefixCls}
         key={key}
         tab={tab}
-        className={tabsClassNames?.item}
-        /* first node should not have margin left */
-        style={i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item }}
+        classNames={{
+          root: tabsClassNames?.item,
+          icon: tabsClassNames?.icon,
+        }}
+        styles={{
+          /* first node should not have margin left */
+          root: i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item },
+          icon: styles?.icon,
+        }}
         closable={tab.closable}
         editable={editable}
         active={key === activeKey}

src/Tabs.tsx

@@ -35,10 +35,12 @@ import type {
 // Used for accessibility
 let uuid = 0;
 
-export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header';
+export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header' | 'icon';
 
-export interface TabsProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+export interface TabsProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'children'
+> {
   prefixCls?: string;
   className?: string;
   style?: React.CSSProperties;

tests/index.test.tsx

@@ -745,12 +745,14 @@ describe('Tabs.Basic', () => {
       item: 'custom-item',
       content: 'custom-content',
       header: 'custom-header',
+      icon: 'custom-icon',
     };
     const customStyles = {
       indicator: { background: 'red' },
       item: { color: 'blue' },
       content: { background: 'green' },
       header: { background: 'yellow' },
+      icon: { color: 'pink' },
     };
     const { container } = render(
       <Tabs
@@ -764,15 +766,18 @@ describe('Tabs.Basic', () => {
     const item = container.querySelector('.rc-tabs-tab') as HTMLElement;
     const content = container.querySelector('.rc-tabs-tabpane') as HTMLElement;
     const header = container.querySelector('.rc-tabs-nav') as HTMLElement;
+    const icon = container.querySelector('.rc-tabs-tab-icon') as HTMLElement;
 
     expect(indicator).toHaveClass('custom-indicator');
     expect(item).toHaveClass('custom-item');
     expect(content).toHaveClass('custom-content');
     expect(header).toHaveClass('custom-header');
+    expect(icon).toHaveClass('custom-icon');
 
     expect(indicator).toHaveStyle({ background: 'red' });
     expect(item).toHaveStyle({ color: 'blue' });
     expect(content).toHaveStyle({ background: 'green' });
     expect(header).toHaveStyle({ background: 'yellow' });
+    expect(icon).toHaveStyle({ color: 'pink' });
   });
 });