From 36dae5ae8ca12eba30fb4e36587b7f46d6ab2c10 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 30 May 2021 20:49:21 +0800
Subject: [PATCH] feat(Button): add icon slot (#8783)

---
 src/button/Button.tsx                            |  4 ++++
 src/button/README.md                             |  9 +++++----
 src/button/README.zh-CN.md                       |  9 +++++----
 src/button/test/__snapshots__/index.spec.ts.snap | 15 +++++++++++++++
 src/button/test/index.spec.ts                    | 10 ++++++++++
 5 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 77724b788..11fe62667 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -89,6 +89,10 @@ export default defineComponent({
         return renderLoadingIcon();
       }
 
+      if (slots.icon) {
+        return <div class={bem('icon')}>{slots.icon()}</div>;
+      }
+
       if (props.icon) {
         return (
           <Icon
diff --git a/src/button/README.md b/src/button/README.md
index 3535d79bf..124654367 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -143,10 +143,11 @@ app.use(Button);
 
 ### Slots
 
-| Name    | Description         |
-| ------- | ------------------- |
-| default | Default slot        |
-| loading | Custom loading icon |
+| Name           | Description         |
+| -------------- | ------------------- |
+| default        | Default slot        |
+| icon `v3.0.18` | Custom icon         |
+| loading        | Custom loading icon |
 
 ### Less Variables
 
diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md
index f8387e5b8..3835fa198 100644
--- a/src/button/README.zh-CN.md
+++ b/src/button/README.zh-CN.md
@@ -166,10 +166,11 @@ app.use(Button);
 
 ### Slots
 
-| 名称    | 说明           |
-| ------- | -------------- |
-| default | 按钮内容       |
-| loading | 自定义加载图标 |
+| 名称           | 说明           |
+| -------------- | -------------- |
+| default        | 按钮内容       |
+| icon `v3.0.18` | 自定义图标     |
+| loading        | 自定义加载图标 |
 
 ### 样式变量
 
diff --git a/src/button/test/__snapshots__/index.spec.ts.snap b/src/button/test/__snapshots__/index.spec.ts.snap
index 4d753b0a4..9e3ac11cc 100644
--- a/src/button/test/__snapshots__/index.spec.ts.snap
+++ b/src/button/test/__snapshots__/index.spec.ts.snap
@@ -22,6 +22,21 @@ exports[`should render icon in the right side when setting icon-position to righ
 </button>
 `;
 
+exports[`should render icon slot correctly 1`] = `
+<button type="button"
+        class="van-button van-button--default van-button--normal"
+>
+  <div class="van-button__content">
+    <div class="van-button__icon">
+      Custom Icon
+    </div>
+    <span class="van-button__text">
+      Text
+    </span>
+  </div>
+</button>
+`;
+
 exports[`should render loading slot correctly 1`] = `
 <button type="button"
         class="van-button van-button--default van-button--normal van-button--loading"
diff --git a/src/button/test/index.spec.ts b/src/button/test/index.spec.ts
index 36accd42e..e75e26aec 100644
--- a/src/button/test/index.spec.ts
+++ b/src/button/test/index.spec.ts
@@ -86,3 +86,13 @@ test('should render icon in the right side when setting icon-position to right',
   });
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render icon slot correctly', () => {
+  const wrapper = mount(Button, {
+    slots: {
+      default: () => 'Text',
+      icon: () => 'Custom Icon',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});