feat(Icon): add dot prop (#4425)

src/icon/README.md

@@ -23,6 +23,7 @@ Use `name` prop to set icon name or icon URL
 ### Show Info
 
 ```html
+<van-icon name="chat" dot />
 <van-icon name="chat" info="9" />
 <van-icon name="chat" info="99+" />
 ```
@@ -63,7 +64,8 @@ import 'vant/lib/icon/local.css';
 | Attribute | Description | Type | Default | Version |
 |------|------|------|------|------|
 | name | Icon name or URL | *string* | `''` | - |
-| info | Content of badge in the upper right corner of icon | *string \| number* | `''` | - |
+| dot | Whether to show red dot | *boolean* | `false` | 2.2.1 |
+| info | Content of the badge | *string \| number* | `''` | - |
 | color | Icon color | *string* | `inherit` | - |
 | size | Icon size | *string \| number* | `inherit` | - |
 | class-prefix | ClassName prefix | *string* | `van-icon` | - |

src/icon/README.zh-CN.md

@@ -24,11 +24,12 @@ Vue.use(Icon);
 <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
 ```
 
-### 显示徽标
+### 提示信息
 
-设置`info`属性后，会在图标的右上角显示红色的徽标
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
 
 ```html
+<van-icon name="chat" dot />
 <van-icon name="chat" info="9" />
 <van-icon name="chat" info="99+" />
 ```
@@ -73,7 +74,8 @@ import 'vant/lib/icon/local.css';
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | name | 图标名称或图片链接 | *string* | - | - |
-| info | 图标右上角徽标提示的内容 | *string \| number* | - | - |
+| dot | 是否显示图标右上角小红点 | *boolean* | `false` | 2.2.1 |
+| info | 图标右上角徽标的内容 | *string \| number* | - | - |
 | color | 图标颜色 | *string* | `inherit` | - |
 | size | 图标大小，如 `20px` `2em`，默认单位为`px` | *string \| number* | `inherit` | - |
 | class-prefix | 类名前缀 | *string* | `van-icon` | - |

src/icon/demo/index.vue

@@ -1,19 +1,21 @@
 <template>
   <demo-section>
     <van-tabs v-model="tab" sticky :color="BLUE">
-      <van-tab title="基础图标">
+      <van-tab :title="$t('basic')">
         <van-col v-for="icon in icons.basic" :key="icon" span="6" @click="copy(icon)">
           <van-icon :name="icon" />
           <span>{{ icon }}</span>
         </van-col>
       </van-tab>
-      <van-tab title="线框风格">
+
+      <van-tab :title="$t('outline')">
         <van-col v-for="icon in icons.outline" :key="icon" span="6" @click="copy(icon)">
           <van-icon :name="icon" />
           <span>{{ icon }}</span>
         </van-col>
       </van-tab>
-      <van-tab title="实底风格">
+
+      <van-tab :title="$t('filled')">
         <van-col v-for="icon in icons.filled" :key="icon" span="6" @click="copy(icon)">
           <van-icon :name="icon" />
           <span>{{ icon }}</span>
@@ -55,15 +57,19 @@ export default {
   i18n: {
     'zh-CN': {
       title: '图标列表',
-      info: '显示徽标',
+      info: '提示信息',
       basic: '基础图标',
-      copied: '复制成功'
+      copied: '复制成功',
+      outline: '线框风格',
+      filled: '实底风格'
     },
     'en-US': {
       title: 'Icon List',
       info: 'Show Info',
-      basic: 'Basic Icon',
-      copied: 'Copied'
+      basic: 'Basic',
+      copied: 'Copied',
+      outline: 'Outline',
+      filled: 'Filled'
     }
   },
 

src/icon/index.tsx

@@ -8,6 +8,7 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/types';
 
 export type IconProps = {
+  dot?: boolean;
   tag: keyof HTMLElementTagNameMap | string;
   name: string;
   size?: string | number;
@@ -47,12 +48,13 @@ function Icon(
       {imageIcon && (
         <Image class={bem('image')} fit="contain" src={props.name} showLoading={false} />
       )}
-      <Info info={props.info} />
+      <Info dot={props.dot} info={props.info} />
     </props.tag>
   );
 }
 
 Icon.props = {
+  dot: Boolean,
   name: String,
   size: [Number, String],
   info: [Number, String],

src/icon/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`dot prop 1`] = `
+<i class="van-icon van-icon-undefined">
+  <div class="van-info van-info--dot"></div>
+</i>
+`;
+
 exports[`render icon default slot 1`] = `
 <i class="van-icon van-icon-success">Default slot
   <!----></i>

src/icon/test/index.spec.js

@@ -46,6 +46,15 @@ test('tag prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('dot prop', () => {
+  const wrapper = mount(Icon, {
+    propsData: {
+      dot: true
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('size without unit', () => {
   const wrapper = mount(Icon, {
     propsData: {