From 3566fe793b5bcb91dec657b9adc218425facc879 Mon Sep 17 00:00:00 2001
From: liuxy0551 <liuxy0551@qq.com>
Date: Tue, 17 Dec 2024 16:32:59 +0800
Subject: [PATCH] style: #584 button with icon

---
 components/button/demo/icon.md     | 18 +++++++++++++----
 theme/dt-theme/default/button.less | 32 ++++++++++++++++++++++++------
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md
index fc84a760..c587d866 100644
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@@ -11,7 +11,7 @@ title:
 图标按钮可添加 `dt-btn-highlight` 类名使用自定义 Icon 按钮和添加图标。
 ```jsx
 import { Button } from 'antd';
-import { ReloadOutlined } from '@ant-design/icons';
+import { PlusSquareOutlined, ReloadOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div className="demo-button-type">
@@ -21,12 +21,11 @@ ReactDOM.render(
         </span>
         一级按钮
     </Button>
-    <Button type="primary" icon={<ReloadOutlined />} className="dt-btn-custom-icon">一级按钮</Button>
     <Button ghost className="dt-btn-custom-icon">
         <span className="anticon">
             <i className="iconfont iconAPItiaoyong"></i>
         </span>
-        按钮
+        ghost 按钮
     </Button>
     <Button className="dt-btn-highlight">
         <span className="anticon">
@@ -34,7 +33,18 @@ ReactDOM.render(
         </span>
         图标按钮
     </Button>
-    <Button icon={<ReloadOutlined />} className="dt-btn-highlight"></Button>
+
+    <br/>
+
+    <Button className="dt-btn-custom-icon" style={{ color: "#1D78FF" }} size="large" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button className="dt-btn-custom-icon" size="middle" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button className="dt-btn-custom-icon" size="small" icon={<PlusSquareOutlined />}>一级按钮</Button>
+
+    <br/>
+
+    <Button className="dt-btn-custom-icon" type="link" size="large" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button className="dt-btn-custom-icon" type="link" size="middle" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button className="dt-btn-custom-icon" type="link" size="small" icon={<PlusSquareOutlined />}>一级按钮</Button>
   </div>,
   mountNode,
 );
diff --git a/theme/dt-theme/default/button.less b/theme/dt-theme/default/button.less
index dfbd7347..86bbd315 100644
--- a/theme/dt-theme/default/button.less
+++ b/theme/dt-theme/default/button.less
@@ -206,19 +206,39 @@
 }
 
 .dt-btn-custom-icon {
+    &.ant-btn > .anticon {
+        line-height: 0;
+    }
     &.ant-btn {
         padding-left: 12px;
         padding-right: 12px;
+        display: inline-flex;
+        align-items: center;
+        svg {
+            color: inherit;
+            font-size: 16px;
+        }
         .anticon + span {
             margin-left: 4px;
         }
     }
-}
-
-.ant-btn.ant-btn-sm {
-    border-radius: 2px;
-    .anticon-search {
-        margin-left: 0;
+    &.ant-btn.ant-btn-lg {
+        font-size: 16px;
+        svg {
+            font-size: 18px;
+        }
+    }
+    &.ant-btn.ant-btn-sm {
+        border-radius: 2px;
+        .anticon-search {
+            margin-left: 0;
+        }
+        svg {
+            font-size: 12px;
+        }
+    }
+    &.ant-btn-link {
+        padding: 0;
     }
 }