style: #584 button with icon

DTStack · Dec 17, 2024 · 3566fe7 · 3566fe7
1 parent 7ce9f66
commit 3566fe7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 10 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 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
@@ -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;
     }
 }