From 77cd515c828d93e1362c96adf8ecc59c8334f6fc Mon Sep 17 00:00:00 2001
From: WmW <zhouzheng0646@qq.com>
Date: Sat, 6 Aug 2022 10:22:43 +0800
Subject: [PATCH] =?UTF-8?q?refactor(Drawer):=20=E9=87=8D=E6=9E=84Drawer,?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4Icon=E7=BB=84=E4=BB=B6=E4=BE=9D=E8=B5=96=20(#?=
 =?UTF-8?q?893,#845)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-drawer/README.md     |  7 +++++--
 packages/react-drawer/src/index.tsx | 13 ++++++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/react-drawer/README.md b/packages/react-drawer/README.md
index cca9480eae..00e93bd71e 100644
--- a/packages/react-drawer/README.md
+++ b/packages/react-drawer/README.md
@@ -18,6 +18,7 @@ import Drawer from '@uiw/react-drawer';
 ```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Drawer, ButtonGroup, Button } from 'uiw';
+import { Information } from '@uiw/icons/lib/Information'
 
 class Demo extends React.Component {
   constructor() {
@@ -39,6 +40,7 @@ class Demo extends React.Component {
           title="抽屉标题"
           isOpen={this.state.visible}
           onClose={this.onClose.bind(this)}
+          icon={<Information style={{ width: 16 }}/>}
         >
           React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。
           <br /><br />
@@ -69,6 +71,7 @@ export default Demo
 ```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Drawer, ButtonGroup, Button } from 'uiw';
+import { Information } from '@uiw/icons/lib/Information'
 
 class Demo extends React.Component {
   constructor() {
@@ -89,7 +92,7 @@ class Demo extends React.Component {
       <div>
         <Drawer
           title="抽屉标题"
-          icon="information"
+          icon={<Information style={{ width: 16 }}/>}
           placement={this.state.placement}
           isOpen={this.state.visible}
           footer="页脚，可以放点内容"
@@ -183,7 +186,7 @@ export default Demo
 | 参数 | 说明 | 类型 | 默认值 |
 |--------- |-------- |--------- |-------- |
 | title | 抽屉标题 | String | - |
-| icon | 设置对话框右上角图标 | String/Element | - |
+| icon | 设置对话框右上角图标 | React.ReactNode | - |
 | isOpen | 是否可见 | Boollean | - |
 | closable | 是否显示右上角的关闭按钮 | Boollean | `true` |
 | placement | 抽屉的方向 | Enum{`top`, `right`, `bottom`, `left`} | `right` |
diff --git a/packages/react-drawer/src/index.tsx b/packages/react-drawer/src/index.tsx
index 60de41ad0e..b8ce2c1034 100644
--- a/packages/react-drawer/src/index.tsx
+++ b/packages/react-drawer/src/index.tsx
@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
-import Overlay, { OverlayProps } from '@uiw/react-overlay';
-import Icon, { IconProps } from '@uiw/react-icon';
+import { OverlayProps } from '@uiw/react-overlay';
+import { Close } from '@uiw/icons/lib/Close';
 import Button from '@uiw/react-button';
+import { IconStyleBase } from '@uiw/react-icon';
 import { HTMLDivProps } from '@uiw/utils';
 import {
   DrawerWrap,
@@ -15,7 +16,7 @@ import {
 
 export interface DrawerProps extends OverlayProps {
   footer?: React.ReactNode;
-  icon?: IconProps['type'];
+  icon?: React.ReactNode;
   title?: React.ReactNode;
   bodyProps?: HTMLDivProps;
   placement?: 'top' | 'right' | 'bottom' | 'left';
@@ -54,7 +55,7 @@ export default (props: DrawerProps = {}) => {
     () => (footer ? <DrawerFooterWrap className={`${prefixCls}-footer`}>{footer}</DrawerFooterWrap> : null),
     [footer],
   );
-  const iconView = useMemo(() => (icon ? <Icon type={icon} /> : null), [icon]);
+  const iconView = icon; // useMemo(() => (icon ? <Icon type={icon} /> : null), [icon]);
   const titleView = useMemo(() => (title ? <h4>{title}</h4> : null), [title]);
 
   return (
@@ -71,7 +72,9 @@ export default (props: DrawerProps = {}) => {
           <DrawerHeaderWrap className={`${prefixCls}-header`}>
             {iconView}
             {titleView}
-            {title && isCloseButtonShown && <Button basic onClick={props.onClose} icon="close" type="light" />}
+            {title && isCloseButtonShown && (
+              <Button basic onClick={props.onClose} icon={<IconStyleBase as={Close} />} type="light" />
+            )}
           </DrawerHeaderWrap>
         )}
         <DrawerBodyWrap className={`${prefixCls}-body`}>