From d5d32b7426fcf7c52773598e0f5310309ac5b0b1 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 7 Aug 2019 15:51:27 +0800
Subject: [PATCH] [new feature] Button: add icon prop (#1841)

---
 example/pages/button/index.wxml |  6 ++++++
 packages/button/README.md       | 11 +++++++++++
 packages/button/index.json      |  3 ++-
 packages/button/index.less      | 16 ++++++++++++++++
 packages/button/index.ts        |  1 +
 packages/button/index.wxml      | 13 ++++++++++++-
 6 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/example/pages/button/index.wxml b/example/pages/button/index.wxml
index fcbd435c..8f8ba2b3 100644
--- a/example/pages/button/index.wxml
+++ b/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>
diff --git a/packages/button/README.md b/packages/button/README.md
index 03f88ff3..a7dcff01 100644
--- a/packages/button/README.md
+++ b/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` |
diff --git a/packages/button/index.json b/packages/button/index.json
index cae21702..e00a5887 100644
--- a/packages/button/index.json
+++ b/packages/button/index.json
@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
+    "van-icon": "../icon/index",
     "van-loading": "../loading/index"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/button/index.less b/packages/button/index.less
index c10e132e..409eed82 100644
--- a/packages/button/index.less
+++ b/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
diff --git a/packages/button/index.ts b/packages/button/index.ts
index ae949014..b528a683 100644
--- a/packages/button/index.ts
+++ b/packages/button/index.ts
@@ -8,6 +8,7 @@ VantComponent({
   classes: ['hover-class', 'loading-class'],
 
   props: {
+    icon: String,
     plain: Boolean,
     block: Boolean,
     round: Boolean,
diff --git a/packages/button/index.wxml b/packages/button/index.wxml
index 0b0763ad..6b3cf016 100644
--- a/packages/button/index.wxml
+++ b/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>