fix(Icon): add demo contain info dot size color (#5171)

src/icon/README.md

@@ -22,12 +22,34 @@ Use `name` prop to set icon name or icon URL
 
 ### Show Info
 
+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.
+
 ```html
 <van-icon name="chat" dot />
 <van-icon name="chat" info="9" />
 <van-icon name="chat" info="99+" />
 ```
 
+### Icon Color
+
+Use `color` prop to set icon color
+
+```html
+<van-icon name="location-o" color="#ff0000" />
+<van-icon name="chat" color="#00ff00" />
+```
+
+### Icon Size
+
+Use `size` prop to set icon size
+
+```html
+<van-icon name="location-o" size="40px" />
+<van-icon name="chat" size="20px" />
+```
+
 ### Use local font file
 
 Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file.

src/icon/README.zh-CN.md

@@ -34,6 +34,25 @@ Vue.use(Icon);
 <van-icon name="chat" info="99+" />
 ```
 
+
+### 图标颜色
+
+`Icon`的`color`属性用来设置图标的颜色
+
+```html
+<van-icon name="location-o" color="#ff0000" />
+<van-icon name="chat" color="#00ff00" />
+```
+
+### 图标大小
+
+`Icon`的`size`属性用来设置图标的尺寸大小
+
+```html
+<van-icon name="location-o" size="40px" />
+<van-icon name="chat" size="20px" />
+```
+
 ### 使用本地字体文件
 
 Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置`url-loader`

src/icon/demo/index.vue

@@ -21,6 +21,49 @@
           <span>{{ icon }}</span>
         </van-col>
       </van-tab>
+
+      <van-tab :title="$t('demo')">
+        <demo-block :title="$t('dot')">
+          <van-col span="6">
+            <van-icon :name="demoIcon" @click="copy(demoIcon)" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+          <van-col span="6">
+            <van-icon :name="demoIcon" dot @click="copy(demoIcon, { dot: true })" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+        </demo-block>
+        <demo-block :title="$t('message')">
+          <van-col span="6">
+            <van-icon :name="demoIcon" @click="copy(demoIcon)" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+          <van-col span="6">
+            <van-icon :name="demoIcon" info="123" @click="copy(demoIcon, { info: '123' })" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+        </demo-block>
+        <demo-block :title="$t('color')">
+          <van-col span="6">
+            <van-icon :name="demoIcon" @click="copy(demoIcon)" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+          <van-col span="6">
+            <van-icon :name="demoIcon" color="#ff0000" @click="copy(demoIcon, { color: '#ff0000' })" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+        </demo-block>
+        <demo-block :title="$t('size')">
+          <van-col span="6">
+            <van-icon :name="demoIcon" @click="copy(demoIcon)" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+          <van-col span="6">
+            <van-icon :name="demoIcon" size="40px" @click="copy(demoIcon, { size: '40px' })" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+        </demo-block>
+      </van-tab>
     </van-tabs>
   </demo-section>
 </template>
@@ -61,7 +104,12 @@ export default {
       basic: '基础图标',
       copied: '复制成功',
       outline: '线框风格',
-      filled: '实底风格'
+      filled: '实底风格',
+      demo: '用法示例',
+      dot: '图标右上角小红点',
+      message: '图标右上角徽标的内容',
+      color: '图标颜色',
+      size: '图标大小'
     },
     'en-US': {
       title: 'Icon List',
@@ -69,7 +117,12 @@ export default {
       basic: 'Basic',
       copied: 'Copied',
       outline: 'Outline',
-      filled: 'Filled'
+      filled: 'Filled',
+      demo: 'Demo',
+      dot: 'Show Red Dot',
+      message: 'Show Info',
+      color: 'Icon Color',
+      size: 'Icon Size'
     }
   },
 
@@ -77,13 +130,27 @@ export default {
     this.BLUE = BLUE;
     this.icons = icons;
     return {
-      tab: 0
+      tab: 0,
+      demoIcon: 'location-o'
     };
   },
 
   methods: {
-    copy(icon) {
+    copy(icon, option = {}) {
-      const tag = `<van-icon name="${icon}" />`;
+      let tag = `<van-icon name="${icon}"`;
+      if ('dot' in option) {
+        tag = `${tag} ${option.dot ? 'dot' : ''}`;
+      }
+      if ('info' in option) {
+        tag = `${tag} info="${option.info}"`;
+      }
+      if ('color' in option) {
+        tag = `${tag} color="${option.color}"`;
+      }
+      if ('size' in option) {
+        tag = `${tag} size="${option.size}"`;
+      }
+      tag = `${tag} />`;
       copyToClipboard(tag);
 
       this.$notify({