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

src/info/index.less

@@ -2,7 +2,7 @@
 
 .van-info {
   position: absolute;
-  top: -@info-size / 2;
+  top: 0;
   right: 0;
   box-sizing: border-box;
   min-width: @info-size;
@@ -16,6 +16,14 @@
   background-color: @info-background-color;
   border: @info-border-width solid @white;
   border-radius: @info-size;
-  transform: translateX(50%);
+  transform: translate(50%, -50%);
   transform-origin: 100%;
+
+  &--dot {
+    width: @info-dot-size;
+    min-width: 0;
+    height: @info-dot-size;
+    background-color: @info-dot-color;
+    border-radius: 100%;
+  }
 }

src/info/index.tsx

@@ -6,6 +6,7 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/types';
 
 export type InfoProps = {
+  dot?: boolean;
   info?: string | number;
 };
 
@@ -17,18 +18,22 @@ function Info(
   slots: DefaultSlots,
   ctx: RenderContext<InfoProps>
 ) {
-  if (!isDef(props.info) || props.info === '') {
+  const { dot, info } = props;
+  const showInfo = isDef(info) && info !== '';
+
+  if (!dot && !showInfo) {
     return;
   }
 
   return (
-    <div class={bem()} {...inherit(ctx, true)}>
-      {props.info}
+    <div class={bem({ dot })} {...inherit(ctx, true)}>
+      {dot ? '' : props.info}
     </div>
   );
 }
 
 Info.props = {
+  dot: Boolean,
   info: [Number, String]
 };