From 0c66625f299589bf0ba1d556e3573f787809bba2 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Mon, 27 Nov 2023 10:32:22 +0800
Subject: [PATCH] feat: Tab Item support icon prop (#680)

* feat: Tab Item support icon prop

* fix: add span Tag for icon

* test: update snap

* Update src/TabNavList/TabNode.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* test: update snap

---------

Co-authored-by: MadCcc <1075746765@qq.com>
---
 docs/examples/basic.tsx      | 6 +++++-
 src/TabNavList/TabNode.tsx   | 3 ++-
 src/TabPanelList/TabPane.tsx | 3 ++-
 tsconfig.json                | 8 ++++++--
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
index 5864bc88..f38970ee 100644
--- a/docs/examples/basic.tsx
+++ b/docs/examples/basic.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Tabs from'../../src';
 import '../../assets/index.less';
+import Tabs from '../../src';
 
 export default () => {
   const [destroy, setDestroy] = React.useState(false);
@@ -9,17 +9,20 @@ export default () => {
       label: 'Light',
       key: 'light',
       children: 'Light!',
+      icon: <span>🌞</span>,
     },
     {
       label: 'Bamboo',
       key: 'bamboo',
       children: 'Bamboo!',
+      icon: <span>🎋</span>,
     },
     {
       label: 'Cute',
       key: 'cute',
       children: 'Cute!',
       disabled: true,
+      icon: <span>🐼</span>,
     },
   ]);
 
@@ -38,6 +41,7 @@ export default () => {
               key: 'yo',
               label: 'Yo',
               children: 'Yo!',
+              icon: <span>👋</span>,
             },
           ]);
         }}
diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx
index a76d57ac..0914ac29 100644
--- a/src/TabNavList/TabNode.tsx
+++ b/src/TabNavList/TabNode.tsx
@@ -24,7 +24,7 @@ function TabNode({
   prefixCls,
   id,
   active,
-  tab: { key, label, disabled, closeIcon },
+  tab: { key, label, disabled, closeIcon, icon },
   closable,
   renderWrapper,
   removeAriaLabel,
@@ -87,6 +87,7 @@ function TabNode({
         }}
         onFocus={onFocus}
       >
+        {icon && <span className={`${tabPrefix}-icon`}>{icon}</span>}
         {label}
       </div>
 
diff --git a/src/TabPanelList/TabPane.tsx b/src/TabPanelList/TabPane.tsx
index e153623d..fdb4ba60 100644
--- a/src/TabPanelList/TabPane.tsx
+++ b/src/TabPanelList/TabPane.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 
 export interface TabPaneProps {
   tab?: React.ReactNode;
@@ -10,6 +10,7 @@ export interface TabPaneProps {
   forceRender?: boolean;
   closable?: boolean;
   closeIcon?: React.ReactNode;
+  icon?: React.ReactNode;
 
   // Pass by TabPaneList
   prefixCls?: string;
diff --git a/tsconfig.json b/tsconfig.json
index f279d1b9..aeeacaa4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,5 +23,9 @@
       ]
     }
   },
-  "include": [".dumi/**/*", ".dumirc.ts", "**/*.ts", "**/*.tsx"]
-}
+  "include": [
+    ".dumirc.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}
\ No newline at end of file