fix(docs): replace deprecated <Icon> with named icon components in demos

Migrate all 27 demo files from the old <Icon name="..." /> API to the
new @tiny-design/icons named exports (e.g. <IconUser />, <IconDown />).
Spinning icons now use the withSpin HOC.

Author: wangdicoder

packages/react/src/avatar/demo/basic.md

@@ -13,17 +13,17 @@ Different sizes setting by `size` and two shapes are available.
   return (
     <>
       <div>
-        <Avatar icon={<Icon name="user" size={50} />} size={70} style={style}/>
-        <Avatar icon={<Icon name="user" size={35} />} size={50} style={style}/>
-        <Avatar icon={<Icon name="user" size={25} />} style={style}/>
-        <Avatar icon={<Icon name="user" />} size={24} style={style}/>
+        <Avatar icon={<IconUser size={50} />} size={70} style={style}/>
+        <Avatar icon={<IconUser size={35} />} size={50} style={style}/>
+        <Avatar icon={<IconUser size={25} />} style={style}/>
+        <Avatar icon={<IconUser />} size={24} style={style}/>
       </div>
       <br/>
       <div>
-        <Avatar shape="square" icon={<Icon name="user" size={50} />} size={70} style={style}/>
-        <Avatar shape="square" icon={<Icon name="user" size={35} />} size={50} style={style}/>
-        <Avatar shape="square" icon={<Icon name="user" size={25} />} style={style}/>
-        <Avatar shape="square" icon={<Icon name="user" />} size={24} style={style}/>
+        <Avatar shape="square" icon={<IconUser size={50} />} size={70} style={style}/>
+        <Avatar shape="square" icon={<IconUser size={35} />} size={50} style={style}/>
+        <Avatar shape="square" icon={<IconUser size={25} />} style={style}/>
+        <Avatar shape="square" icon={<IconUser />} size={24} style={style}/>
       </div>
     </>
   );

packages/react/src/avatar/demo/type.md

@@ -12,12 +12,12 @@ Image, Icon and letter are supported, and the latter two kinds avatar can have c
 
   return (
     <>
-      <Avatar icon={<Icon name="user" size={20}/>} style={style}/>
+      <Avatar icon={<IconUser size={20}/>} style={style}/>
       <Avatar style={style}>U</Avatar>
       <Avatar style={style}>USER</Avatar>
       <Avatar src="/avatar/avatar1.png" style={{ ...style }}/>
       <Avatar style={{ ...style, color: '#f56a00', backgroundColor: '#fde3cf' }}>LW</Avatar>
-      <Avatar style={{ ...style, backgroundColor: '#87d068' }} icon={<Icon name="user" size={20}/>} />
+      <Avatar style={{ ...style, backgroundColor: '#87d068' }} icon={<IconUser size={20}/>} />
     </>
   );
 }

packages/react/src/badge/demo/basic.md

@@ -30,7 +30,7 @@ Simplest Usage.
       <Badge count="hot" style={badgeStyle}>
         <span style={spanStyle} />
       </Badge>
-      <Badge count={<Icon name="lock" style={{ color: '#f5222d' }} />}>
+      <Badge count={<IconLock style={{ color: '#f5222d' }} />}>
         <span style={spanStyle} />
       </Badge>
     </>

packages/react/src/badge/demo/dot.md

@@ -13,10 +13,10 @@ Display a red badge without a specific count.
   return (
     <>
       <Badge dot style={badgeStyle}>
-        <Icon name="broadcast" />
+        <IconBroadcast />
       </Badge>
       <Badge dot={false} style={badgeStyle}>
-        <Icon name="broadcast" />
+        <IconBroadcast />
       </Badge>
       <Badge dot>
         <span>Something</span>

packages/react/src/breadcrumb/demo/icon.md

@@ -7,10 +7,10 @@ Using an icon replaces a text or combination.
 ```jsx live
 <Breadcrumb>
   <Breadcrumb.Item>
-    <Icon name="home" />
+    <IconHome />
   </Breadcrumb.Item>
   <Breadcrumb.Item>
-    <a href="#/components/breadcrumb"><Icon name="inspection" />Project List</a>
+    <a href="#/components/breadcrumb"><IconInspection />Project List</a>
   </Breadcrumb.Item>
   <Breadcrumb.Item>A Project</Breadcrumb.Item>
 </Breadcrumb>

packages/react/src/button/demo/icon.md

@@ -6,10 +6,10 @@ Use icons to add more meaning to Button. You can use icon alone to save some spa
 
 ```jsx live
 <Flex gap="sm">
-  <Button icon={<Icon name="wifi"/>} color="primary"/>
-  <Button icon={<Icon name="gift"/>} color="primary"/>
-  <Button icon={<Icon name="search"/>} color="primary">Search</Button>
-  <Button btnType="primary">Upload <Icon name="cloud-upload"/></Button>
+  <Button icon={<IconWifi/>} color="primary"/>
+  <Button icon={<IconGift/>} color="primary"/>
+  <Button icon={<IconSearch/>} color="primary">Search</Button>
+  <Button btnType="primary">Upload <IconCloudUpload/></Button>
 </Flex>
 ```
 

packages/react/src/dropdown/demo/basic.md

@@ -13,7 +13,7 @@ A very simple dropdown.
     </Menu>
   )}>
   <a onClick={e => e.preventDefault()}>
-    Hover me <Icon name="down" size={12}/>
+    Hover me <IconDown size={12}/>
   </a>
 </Dropdown>
 ```

packages/react/src/dropdown/demo/cascade.md

@@ -22,7 +22,7 @@ The menu has multiple levels.
     </Menu>
   )}>
   <a onClick={e => e.preventDefault()}>
-    Cascade dropdowm <Icon name="down" size={12}/>
+    Cascade dropdowm <IconDown size={12}/>
   </a>
 </Dropdown>
 ```

packages/react/src/dropdown/demo/close.md

@@ -44,7 +44,7 @@ class CloseExample extends React.PureComponent {
         onVisibleChange={this.handleVisibleChange}
         visible={this.state.visible}>
         <a onClick={e => e.preventDefault()}>
-          Hover me <Icon name="down" size={12}/>
+          Hover me <IconDown size={12}/>
         </a>
       </Dropdown>
     );

packages/react/src/dropdown/demo/other.md

@@ -14,7 +14,7 @@ Divider and disabled menu item.
     </Menu>
   )}>
   <a onClick={e => e.preventDefault()}>
-    Hover me <Icon name="down" size={12}/>
+    Hover me <IconDown size={12}/>
   </a>
 </Dropdown>
 ```