style: DTStack#584 button with icon

liuxy0551 · Dec 17, 2024 · 834053d · 834053d
1 parent 7ce9f66
commit 834053d
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 11 deletions.
diff --git 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,20 +21,30 @@ 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">
             <i className="iconfont iconAPItiaoyong"></i>
         </span>
         图标按钮
     </Button>
-    <Button icon={<ReloadOutlined />} className="dt-btn-highlight"></Button>
+
+    <br/>
+
+    <Button style={{ color: "#1D78FF" }} size="large" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button size="middle" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button size="small" icon={<PlusSquareOutlined />}>一级按钮</Button>
+
+    <br/>
+
+    <Button type="link" size="large" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button type="link" size="middle" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button 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
@@ -1,11 +1,38 @@
 @import "../const.less";
 
+.ant-btn > .anticon {
+    line-height: 0;
+}
+
 .ant-btn {
     line-height: 100%;
     box-shadow: unset;
+    display: inline-flex;
+    align-items: center;
     .anticon-minus, .anticon-plus {
         font-size: 13px;
     }
+    svg {
+        color: inherit;
+        font-size: 16px;
+    }
+}
+
+.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.ant-btn-primary {
@@ -215,13 +242,6 @@
     }
 }
 
-.ant-btn.ant-btn-sm {
-    border-radius: 2px;
-    .anticon-search {
-        margin-left: 0;
-    }
-}
-
 .ant-btn-icon-only {
     padding: 0;
     width: 48px;