fix: #130 button only icon

DTStack · Dec 17, 2024 · dfae16f · dfae16f
1 parent 3ff557c
commit dfae16f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
@@ -18,7 +18,8 @@ ReactDOM.render(
     <Button type="primary">一级按钮</Button>
     <Button>二级按钮</Button>
     <Button type="link">文字按钮</Button>
-    <Button icon={<SearchOutlined />}  className="dt-btn-highlight"></Button>
+    <Button icon={<SearchOutlined />} className="dt-btn-highlight"></Button>
+    <Button size="small" icon={<SearchOutlined />}></Button>
   </div>,
   mountNode,
 );

diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md
@@ -36,6 +36,15 @@ ReactDOM.render(
 
     <br/>
 
+    <Button size="large" type="primary" icon={<ReloadOutlined />}></Button>
+    <Button size="middle" type="primary" icon={<ReloadOutlined />}></Button>
+    <Button size="small" type="primary" icon={<ReloadOutlined />}></Button>
+    <Button size="large" icon={<ReloadOutlined />}></Button>
+    <Button size="middle" icon={<ReloadOutlined />}></Button>
+    <Button size="small" icon={<ReloadOutlined />}></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>

diff --git a/theme/dt-theme/default/button.less b/theme/dt-theme/default/button.less
@@ -242,16 +242,27 @@
     }
 }
 
-.ant-btn-icon-only {
-    padding: 0;
+.ant-btn.ant-btn-icon-only {
     width: 48px;
     height: 32px;
-    background: @blue;
-    color: @white;
-    .anticon-search {
-        width: 14px;
-        height: 14px;
-        margin-left: 7px;
+    >.anticon {
+        font-size: 16px;
+    }
+}
+
+.ant-btn-lg.ant-btn-icon-only {
+    width: 50px;
+    height: 34px;
+    >.anticon {
+        font-size: 18px;
+    }
+}
+
+.ant-btn-sm.ant-btn-icon-only {
+    width: 28px;
+    height: 24px;
+    >.anticon {
+        font-size: 12px;
     }
 }