Skip to content

Commit fb24825

Browse files
authored
fix(button): set svg size when button is only icon (#2380)
1 parent 3fe652c commit fb24825

File tree

2 files changed

+16
-0
lines changed

2 files changed

+16
-0
lines changed

packages/theme/src/button/index.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,17 @@
4141
@h: %('var(--tv-Button-height%a)', @size);
4242
@p: %('var(--tv-Button-padding-x%a)', @size);
4343
@mw: %('var(--tv-Button-min-width%a)', @size);
44+
@iconSize: %('var(--tv-Button-size-icon-font-size%a)', @size);
4445

4546
font-size: e(@fs);
4647
height: e(@h);
4748
padding: 0 e(@p);
4849
min-width: e(@mw);
50+
51+
// 仅图标时,图标的大小
52+
&.is-only-icon .@{svg-prefix-cls} {
53+
font-size: e(@iconSize);
54+
}
4955
}
5056

5157
.size-mixin(e('')); // 默认尺寸 3

packages/theme/src/button/vars.less

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@
3535
--tv-Button-padding-x: 24px; // space变量不存在,是否替换成 space-base * 6 这种?
3636
// 默认时按钮最小宽度
3737
--tv-Button-min-width: 96px; // 是否替换成 size-base * 24 这种?
38+
// 默认时按钮内图标的大小
39+
--tv-Button-size-icon-font-size: 18px;
3840
// 超大按钮字号
3941
--tv-Button-font-size-large: var(--tv-font-size-md);
4042
// 超大按钮高度
@@ -43,6 +45,8 @@
4345
--tv-Button-padding-x-large: 48px;
4446
// 超大按钮最小宽度
4547
--tv-Button-min-width-large: 124px;
48+
// 超大按钮内图标的大小
49+
--tv-Button-size-icon-font-size-large: 28px;
4650
// 中等按钮字号
4751
--tv-Button-font-size-medium: var(--tv-font-size-md);
4852
// 中等按钮高度
@@ -51,6 +55,8 @@
5155
--tv-Button-padding-x-medium: 32px;
5256
// 中等按钮最小宽度
5357
--tv-Button-min-width-medium: 112px;
58+
// 中等按钮内图标的大小
59+
--tv-Button-size-icon-font-size-medium: 24px;
5460
// 小型按钮字号
5561
--tv-Button-font-size-small: var(--tv-font-size-sm);
5662
// 小型按钮高度
@@ -59,6 +65,8 @@
5965
--tv-Button-padding-x-small: 16px;
6066
// 小型按钮最小宽度
6167
--tv-Button-min-width-small: 72px;
68+
// 小型按钮内图标的大小
69+
--tv-Button-size-icon-font-size-small: 14px;
6270
// 超小按钮字号
6371
--tv-Button-font-size-mini: var(--tv-font-size-sm);
6472
// 超小按钮高度
@@ -67,6 +75,8 @@
6775
--tv-Button-padding-x-mini: 16px;
6876
// 超小按钮最小宽度
6977
--tv-Button-min-width-mini: 60px;
78+
// 超小按钮内图标的大小
79+
--tv-Button-size-icon-font-size-mini: 12px;
7080

7181
//------------------------------------------------------ 场景3、颜色 text-color bg-color border-color icon-color----
7282
//------ 状态: 默认+primary+4主题 ghost plain (hover active) disabled

0 commit comments

Comments
 (0)