From c2e1c03eb66760701bd2905e02b9aedaf06bf2d1 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 28 Feb 2020 15:51:05 +0800
Subject: [PATCH] feat(TabbarItem): add icon-prefix prop (#5666)

---
 src/tabbar-item/index.js   | 18 +++++++++++++++---
 src/tabbar/README.md       |  1 +
 src/tabbar/README.zh-CN.md |  1 +
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/tabbar-item/index.js b/src/tabbar-item/index.js
index cbafc9a25..95190c94e 100644
--- a/src/tabbar-item/index.js
+++ b/src/tabbar-item/index.js
@@ -20,6 +20,7 @@ export default createComponent({
     icon: String,
     name: [Number, String],
     info: [Number, String],
+    iconPrefix: String,
   },
 
   data() {
@@ -47,20 +48,31 @@ export default createComponent({
       this.$emit('click', event);
       route(this.$router, this);
     },
+
+    genIcon(active) {
+      const slot = this.slots('icon', { active });
+
+      if (slot) {
+        return slot;
+      }
+
+      if (this.icon) {
+        return <Icon name={this.icon} classPrefix={this.iconPrefix} />;
+      }
+    },
   },
 
   render() {
-    const { icon, slots } = this;
     const active = this.parent.route ? this.routeActive : this.active;
     const color = this.parent[active ? 'activeColor' : 'inactiveColor'];
 
     return (
       <div class={bem({ active })} style={{ color }} onClick={this.onClick}>
         <div class={bem('icon')}>
-          {slots('icon', { active }) || (icon && <Icon name={icon} />)}
+          {this.genIcon(active)}
           <Info dot={this.dot} info={this.info} />
         </div>
-        <div class={bem('text')}>{slots('default', { active })}</div>
+        <div class={bem('text')}>{this.slots('default', { active })}</div>
       </div>
     );
   },
diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index 0d27b4ce9..6da4777e8 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -179,6 +179,7 @@ export default {
 |------|------|------|------|
 | name | Identifier | *number \| string* | Item index |
 | icon | Icon name | *string* | - |
+| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
 | dot | Whether to show red dot | *boolean* | - |
 | info | Content of the badge | *number \| string* | - |
 | url | Link | *string* | - |
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index e0e9ebc66..da612e324 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -186,6 +186,7 @@ export default {
 |------|------|------|------|
 | name | 标签名称，作为匹配的标识符 | *number \| string* | 当前标签的索引值 |
 | icon | [图标名称](#/zh-CN/icon)或图片链接| *string* | - |
+| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
 | dot | 是否显示图标右上角小红点 | *boolean* | `false` |
 | info | 图标右上角徽标的内容 | *number \| string* | - |
 | url | 点击后跳转的链接地址 | *string* | - |