[new feature] Icon: size prop support number type

docs/markdown/v2-progress-tracking.md

@@ -61,6 +61,10 @@
 
 - 新增`label-class`属性
 
+### Icon
+
+- 支持`Number`类型的`size`属性
+
 ### Popup
 
 - 新增`click`事件

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` |
 

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)}
     >

packages/icon/test/__snapshots__/index.spec.js.snap

@@ -15,6 +15,11 @@ exports[`render icon with url name 1`] = `
   <!----></i>
 `;
 
+exports[`size without unit 1`] = `
+<i class="van-icon van-icon-undefined" style="font-size: 20px;">
+  <!----></i>
+`;
+
 exports[`tag prop 1`] = `
 <div class="van-icon van-icon-undefined">
   <!---->

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();
+});

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 |
 

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

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;
 }