[new feature] Checkbox: add icon-size prop

docs/markdown/v2-progress-tracking.md

@@ -64,6 +64,10 @@
 
 - 新增`loading-type`属性
 
+### Checkbox
+
+- 新增`icon-size`属性
+
 ### Field
 
 - 新增`label-class`属性

packages/checkbox/en-US.md

@@ -142,6 +142,7 @@ export default {
 | shape | Can be set to `square` | `String` | `round` |
 | v-model | Check status | `Boolean` | `false` |
 | disabled | Diable checkbox | `Boolean` | `false` |
+| icon-size | Icon size | `String | Number` | `20px` |
 | label-disabled | Whether to disable label click | `Boolean` | `false` |
 | label-position | Can be set to `left` | `String` | `right` |
 | checked-color | Checked color | `String` | `#1989fa` | - |

packages/checkbox/index.less

@@ -8,19 +8,21 @@
   &__label {
     display: inline-block;
     vertical-align: middle;
-    line-height: @checkbox-size;
   }
 
   &__icon {
-    height: @checkbox-size;
+    height: 1em;
+    line-height: 1em;
+    font-size: @checkbox-size;
 
     .van-icon {
-      font-size: 14px;
+      display: block;
+      width: 1.25em;
+      height: 1.25em;
+      font-size: .8em;
       color: transparent;
       text-align: center;
       line-height: inherit;
-      width: @checkbox-size;
-      height: @checkbox-size;
       box-sizing: border-box;
       border: 1px solid @checkbox-border-color;
       transition: @checkbox-transition-duration;
@@ -56,6 +58,7 @@
 
   &__label {
     color: @checkbox-label-color;
+    line-height: @checkbox-size;
     margin-left: @checkbox-label-margin;
 
     &--left {

packages/checkbox/zh-CN.md

@@ -145,6 +145,7 @@ export default {
 | shape | 形状，可选值为 `square` | `String` | `round` | - |
 | v-model | 是否为选中状态 | `Boolean` | `false` | - |
 | disabled | 是否禁用复选框 | `Boolean` | `false` | - |
+| icon-size | 图标大小，默认单位为`px` | `String | Number` | `20px` | 2.0.0 |
 | label-disabled | 是否禁用复选框文本点击 | `Boolean` | `false` | - |
 | label-position | 文本位置，可选值为 `left` | `String` | `right` | 1.1.11 |
 | checked-color | 选中状态颜色 | `String` | `#1989fa` | 1.4.3 |

packages/mixins/checkbox.js

@@ -3,6 +3,7 @@
  */
 import Icon from '../icon';
 import { ChildrenMixin } from './relation';
+import { suffixPx } from '../utils';
 
 export const CheckboxMixin = (parent, bem) => ({
   mixins: [ChildrenMixin(parent)],
@@ -10,6 +11,7 @@ export const CheckboxMixin = (parent, bem) => ({
   props: {
     name: null,
     value: null,
+    iconSize: [String, Number],
     disabled: Boolean,
     checkedColor: String,
     labelPosition: String,
@@ -61,6 +63,7 @@ export const CheckboxMixin = (parent, bem) => ({
       >
         <div
           class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
+          style={{ fontSize: suffixPx(this.iconSize) }}
           onClick={this.onClickIcon}
         >
           {CheckIcon}