[bugfix] Tabbar: info not work when use icon slot (#1705)

packages/icon/config/template.css

@@ -14,23 +14,6 @@
   font-size: inherit;
   text-rendering: auto;
 
-  &__info {
-    color: #fff;
-    left: 100%;
-    top: -.5em;
-    font-size: .5em;
-    padding: 0 .3em;
-    text-align: center;
-    min-width: 1.2em;
-    line-height: 1.2;
-    position: absolute;
-    border-radius: .6em;
-    box-sizing: border-box;
-    background-color: $red;
-    transform: translateX(-50%);
-    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
-  }
-
   &::before {
     display: inline-block;
   }

packages/icon/index.vue

@@ -1,16 +1,21 @@
 <template>
   <i :class="[classPrefix, `${classPrefix}-${name}`]" :style="style" v-on="$listeners">
     <slot />
-    <div v-if="isDef(info)" :class="b('info')">{{ info }}</div>
+    <van-info :info="info" />
   </i>
 </template>
 
 <script>
+import Info from '../info';
 import create from '../utils/create-basic';
 
 export default create({
   name: 'icon',
 
+  components: {
+    [Info.name]: Info
+  },
+
   props: {
     name: String,
     info: [String, Number],