diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index 40e0af2b1..6ea832a49 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -61,6 +61,10 @@
- 新增`label-class`属性
+### Icon
+
+- 支持`Number`类型的`size`属性
+
### Popup
- 新增`click`事件
diff --git a/packages/icon/en-US.md b/packages/icon/en-US.md
index 8a04af738..6290d052e 100644
--- a/packages/icon/en-US.md
+++ b/packages/icon/en-US.md
@@ -60,7 +60,7 @@ import 'vant/lib/icon/local.css';
| name | Icon name or URL | `String` | `''` |
| info | Info message | `String | Number` | `''` |
| color | Icon color | `String` | `inherit` |
-| size | Icon size | `String` | `inherit` |
+| size | Icon size | `String | Number` | `inherit` |
| class-prefix | ClassName prefix | `String` | `van-icon` |
| tag | HTML Tag | `String` | `i` |
diff --git a/packages/icon/index.tsx b/packages/icon/index.tsx
index 67fe55de3..f9651ebf5 100644
--- a/packages/icon/index.tsx
+++ b/packages/icon/index.tsx
@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { use, suffixPx } from '../utils';
import { inherit } from '../utils/functional';
import Info from '../info';
import { isSrc } from '../utils/validate/src';
@@ -38,7 +38,7 @@ function Icon(
]}
style={{
color: props.color,
- fontSize: props.size
+ fontSize: suffixPx(props.size)
}}
{...inherit(ctx, true)}
>
diff --git a/packages/icon/test/__snapshots__/index.spec.js.snap b/packages/icon/test/__snapshots__/index.spec.js.snap
index cdd94e7ea..69140e436 100644
--- a/packages/icon/test/__snapshots__/index.spec.js.snap
+++ b/packages/icon/test/__snapshots__/index.spec.js.snap
@@ -15,6 +15,11 @@ exports[`render icon with url name 1`] = `
`;
+exports[`size without unit 1`] = `
+
+
+`;
+
exports[`tag prop 1`] = `
diff --git a/packages/icon/test/index.spec.js b/packages/icon/test/index.spec.js
index 70e587753..b20dac9f8 100644
--- a/packages/icon/test/index.spec.js
+++ b/packages/icon/test/index.spec.js
@@ -36,3 +36,12 @@ test('tag prop', () => {
});
expect(wrapper).toMatchSnapshot();
});
+
+test('size without unit', () => {
+ const wrapper = mount(Icon, {
+ propsData: {
+ size: 20
+ }
+ });
+ expect(wrapper).toMatchSnapshot();
+});
diff --git a/packages/icon/zh-CN.md b/packages/icon/zh-CN.md
index b6cb0845b..ee881d7be 100644
--- a/packages/icon/zh-CN.md
+++ b/packages/icon/zh-CN.md
@@ -63,7 +63,7 @@ import 'vant/lib/icon/local.css';
| name | 图标名称或图片链接 | `String` | - | - |
| info | 图标右上角文字提示 | `String | Number` | - | - |
| color | 图标颜色 | `String` | `inherit` | 1.1.3 |
-| size | 图标大小,如 `20px` `2em` | `String` | `inherit` | 1.1.15 |
+| size | 图标大小,如 `20px` `2em`,默认单位为`px` | `String | Number` | `inherit` | 2.0.0 |
| class-prefix | 类名前缀 | `String` | `van-icon` | 1.2.1 |
| tag | HTML 标签 | `String` | `i` | 1.6.10 |
diff --git a/packages/loading/zh-CN.md b/packages/loading/zh-CN.md
index b2e3a5775..46e843784 100644
--- a/packages/loading/zh-CN.md
+++ b/packages/loading/zh-CN.md
@@ -41,8 +41,8 @@ Vue.use(Loading);
|------|------|------|------|------|
| color | 颜色 | `String` | `#c9c9c9` | - |
| type | 类型,可选值为 `spinner` | `String` | `circular` | - |
-| size | 加载图标大小 | `String | Number` | `30px` | - |
-| text-size | 文字大小 | `String | Number` | `14px` | 2.0.0 |
+| size | 加载图标大小,默认单位为`px` | `String | Number` | `30px` | - |
+| text-size | 文字大小,默认单位为`px` | `String | Number` | `14px` | 2.0.0 |
| vertical | 是否垂直排列图标和文字内容 | `Boolean` | `false` | 2.0.0 |
### Slots
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index e6c061f61..59ad68599 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -50,7 +50,11 @@ export function isInDocument(element: HTMLElement): boolean {
return document.body.contains(element);
}
-export function suffixPx(value: string | number): string {
+export function suffixPx(value?: string | number): string | undefined {
+ if (!isDef(value)) {
+ return undefined;
+ }
+
value = String(value);
return isNumber(value) ? `${value}px` : value;
}