feat(Checkbox): add icon-size prop (#1989)

packages/checkbox/README.md

@@ -201,6 +201,7 @@ Page({
 | label-position | 文本位置，可选值为 `left` | *string* | `right` | - |
 | use-icon-slot | 是否使用 icon slot | *boolean* | `false` | - |
 | checked-color | 选中状态颜色 | *string* | `#1989fa` | - |
+| icon-size | icon 大小 | *string \| number* | `20px` |
 
 ### CheckboxGroup API
 

packages/checkbox/index.less

@@ -17,10 +17,10 @@
   &__icon {
     display: block;
     box-sizing: border-box;
-    width: @checkbox-size;
-    height: @checkbox-size;
+    width: 1em;
+    height: 1em;
     color: transparent;
-    font-size: 14px;
+    font-size: @checkbox-size;
     text-align: center;
     border: 1px solid @checkbox-border-color;
     transition-duration: @checkbox-transition-duration;

packages/checkbox/index.ts

@@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { addUnit } from '../common/utils';
 
 function emit(target: WechatMiniprogram.Component.TrivialInstance, value: boolean | any[]) {
   target.$emit('input', value);
@@ -31,9 +32,17 @@ VantComponent({
     shape: {
       type: String,
       value: 'round'
+    },
+    iconSize: {
+      type: null,
+      observer: 'setSizeWithUnit'
     }
   },
 
+  data: {
+    sizeWithUnit: '20px'
+  },
+
   methods: {
     emitChange(value: boolean) {
       if (this.parent) {
@@ -78,6 +87,12 @@ VantComponent({
           emit(parent, parentValue);
         }
       }
-    }
+    },
+
+    setSizeWithUnit(size: string | number): void {
+      this.set({
+        sizeWithUnit: addUnit(size)
+      });
+    },
   }
 });

packages/checkbox/index.wxml

@@ -6,10 +6,11 @@
     <van-icon
       wx:else
       name="success"
+      size="0.8em"
       class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
-      style="{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
+      style="font-size: {{ sizeWithUnit }};{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
       custom-class="icon-class"
-      custom-style="line-height: 20px;"
+      custom-style="line-height: 1.25em;"
     />
   </view>
   <view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel">