feat(Icon): add badge prop, mark info prop deprecated

src/icon/README.md

@@ -20,16 +20,16 @@ Use `name` prop to set icon name or icon URL
 <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
 ```
 
-### Show Info
+### Show Badge
 
 Use `dot` prop, a small red dot will be displayed in the upper right corner of the icon. 
 
-Use `info` prop, the info will be displayed in the upper right corner of the icon.
+Use `badge` prop, the badge will be displayed in the upper right corner of the icon.
 
 ```html
 <van-icon name="chat-o" dot />
-<van-icon name="chat-o" info="9" />
+<van-icon name="chat-o" badge="9" />
-<van-icon name="chat-o" info="99+" />
+<van-icon name="chat-o" badge="99+" />
 ```
 
 ### Icon Color
@@ -87,7 +87,7 @@ import 'vant/lib/icon/local.css';
 |------|------|------|------|
 | name | Icon name or URL | *string* | `''` |
 | dot `v2.2.1` | Whether to show red dot | *boolean* | `false` |
-| info | Content of the badge | *number \| string* | `''` |
+| badge `v2.5.6` | Content of the badge | *number \| string* | `''` |
 | color | Icon color | *string* | `inherit` |
 | size | Icon size | *number \| string* | `inherit` |
 | class-prefix | ClassName prefix | *string* | `van-icon` |

src/icon/README.zh-CN.md

@@ -24,14 +24,14 @@ Vue.use(Icon);
 <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
 ```
 
-### 提示信息
+### 徽标提示
 
-设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
 
 ```html
 <van-icon name="chat-o" dot />
-<van-icon name="chat-o" info="9" />
+<van-icon name="chat-o" badge="9" />
-<van-icon name="chat-o" info="99+" />
+<van-icon name="chat-o" badge="99+" />
 ```
 
 ### 图标颜色
@@ -93,7 +93,8 @@ import 'vant/lib/icon/local.css';
 |------|------|------|------|
 | name | 图标名称或图片链接 | *string* | - |
 | dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` |
-| info | 图标右上角徽标的内容 | *number \| string* | - |
+| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - |
+| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | *number \| string* | - |
 | color | 图标颜色 | *string* | `inherit` |
 | size | 图标大小，如 `20px` `2em`，默认单位为`px` | *number \| string* | `inherit` |
 | class-prefix | 类名前缀，用于使用自定义图标 | *string* | `van-icon` |

src/icon/demo/index.vue

@@ -11,15 +11,15 @@
           </van-col>
         </demo-block>
 
-        <demo-block :title="$t('info')">
+        <demo-block :title="$t('badge')">
           <van-col span="6" @click="copy(demoIcon, { dot: true })">
             <van-icon :name="demoIcon" dot />
           </van-col>
-          <van-col span="6" @click="copy(demoIcon, { info: '9' })">
+          <van-col span="6" @click="copy(demoIcon, { badge: '9' })">
-            <van-icon :name="demoIcon" info="9" />
+            <van-icon :name="demoIcon" badge="9" />
           </van-col>
-          <van-col span="6" @click="copy(demoIcon, { info: '99+' })">
+          <van-col span="6" @click="copy(demoIcon, { badge: '99+' })">
-            <van-icon :name="demoIcon" info="99+" />
+            <van-icon :name="demoIcon" badge="99+" />
           </van-col>
         </demo-block>
 
@@ -113,7 +113,7 @@ export default {
   i18n: {
     'zh-CN': {
       title: '图标列表',
-      info: '提示信息',
+      badge: '徽标提示',
       basic: '基础图标',
       copied: '复制成功',
       outline: '线框风格',
@@ -124,7 +124,7 @@ export default {
     },
     'en-US': {
       title: 'Icon List',
-      info: 'Show Info',
+      badge: 'Show Badge',
       basic: 'Basic',
       copied: 'Copied',
       outline: 'Outline',
@@ -152,8 +152,8 @@ export default {
       if ('dot' in option) {
         tag = `${tag} ${option.dot ? 'dot' : ''}`;
       }
-      if ('info' in option) {
+      if ('badge' in option) {
-        tag = `${tag} info="${option.info}"`;
+        tag = `${tag} badge="${option.badge}"`;
       }
       if ('color' in option) {
         tag = `${tag} color="${option.color}"`;

src/icon/index.tsx

@@ -1,5 +1,5 @@
 // Utils
-import { createNamespace, addUnit } from '../utils';
+import { createNamespace, addUnit, isDef } from '../utils';
 import { inherit } from '../utils/functional';
 
 // Components
@@ -15,6 +15,7 @@ export type IconProps = {
   name?: string;
   size?: string | number;
   info?: string | number;
+  badge?: string | number;
   color?: string;
   classPrefix: string;
 };
@@ -62,7 +63,10 @@ function Icon(
     >
       {slots.default && slots.default()}
       {imageIcon && <img class={bem('image')} src={name} />}
-      <Info dot={props.dot} info={props.info} />
+      <Info
+        dot={props.dot}
+        info={isDef(props.badge) ? props.badge : props.info}
+      />
     </props.tag>
   );
 }
@@ -71,7 +75,10 @@ Icon.props = {
   dot: Boolean,
   name: String,
   size: [Number, String],
+  // @deprecated
+  // should be removed in next major version
   info: [Number, String],
+  badge: [Number, String],
   color: String,
   tag: {
     type: String,

src/info/index.tsx

@@ -9,6 +9,7 @@ import { DefaultSlots } from '../utils/types';
 export type InfoProps = {
   dot?: boolean;
   info?: string | number;
+  badge?: string | number;
 };
 
 const [createComponent, bem] = createNamespace('info');