[new feature] Button: add icon prop (#1841)

example/pages/button/index.wxml

@@ -34,6 +34,12 @@
     <van-button type="danger" round>圆形按钮</van-button>
   </demo-block>
 
+  <demo-block title="图标按钮" padding>
+    <van-button type="primary" icon="star-o" class="demo-margin-right" />
+    <van-button type="primary" icon="star-o" class="demo-margin-right">按钮</van-button>
+    <van-button plain type="primary" icon="https://img.yzcdn.cn/vant/logo.png">按钮</van-button>
+  </demo-block>
+
   <demo-block title="按钮尺寸" padding>
     <van-button size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
     <van-button class="demo-margin-right">普通按钮</van-button>

packages/button/README.md

@@ -59,6 +59,16 @@
 <van-button loading type="danger" loading-text="加载中..." />
 ```
 
+### 图标按钮
+
+通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
+
+```html 
+<van-button icon="star-o" type="primary" />
+<van-button icon="star-o" type="primary">按钮</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">按钮</van-button>
+```
+
 ### 按钮形状
 
 ```html
@@ -83,6 +93,7 @@
 | id | 标识符 | `String` | - |
 | type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | `String` | `default` |
 | size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` |
+| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - |
 | plain | 是否为朴素按钮 | `Boolean` | `false` |
 | block | 是否为块级元素 | `Boolean` | `false` |
 | round | 是否为圆形按钮 | `Boolean` | `false` |

packages/button/index.json

@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
+    "van-icon": "../icon/index",
     "van-loading": "../loading/index"
   }
 }

packages/button/index.less

@@ -141,12 +141,28 @@
     opacity: 0.5;
   }
 
+  &__text {
+    display: inline;
+  }
+
   &__loading-text {
     margin-left: 5px;
     display: inline-block;
     vertical-align: middle;
   }
 
+  &__icon {
+    min-width: 1em;
+    line-height: inherit !important;
+    vertical-align: top;
+  }
+
+  &__icon + &__text:not(:empty) {
+    display: inline-block;
+    margin-left: 5px;
+    vertical-align: top;
+  }
+
   &--hairline {
     border-width: 0;
     padding-top: 1px; // add 1px padding for text vertical align middle

packages/button/index.ts

@@ -8,6 +8,7 @@ VantComponent({
   classes: ['hover-class', 'loading-class'],
 
   props: {
+    icon: String,
     plain: Boolean,
     block: Boolean,
     round: Boolean,

packages/button/index.wxml

@@ -35,5 +35,16 @@
       {{ loadingText }}
     </view>
   </block>
-  <slot wx:else />
+  <block wx:else>
+    <van-icon
+      wx:if="{{ icon }}"
+      size="1.2em"
+      name="{{ icon }}"
+      class="van-button__icon"
+      custom-style="line-height: inherit;"
+    />
+    <view class="van-button__text">
+      <slot />
+    </view>
+  </block>
 </button>