feat(TabbarItem): add icon-prefix prop (#5666)

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>
     );
   },

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* | - |

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* | - |