From cc48c405473cec5b36e9f97648046a3942052754 Mon Sep 17 00:00:00 2001
From: Dottieworks <daejonglin@gmail.com>
Date: Mon, 9 Dec 2019 13:57:07 +0800
Subject: [PATCH] docs(Icon): add demo and docs (#2498)

---
 example/pages/icon/index.js   |   3 +-
 example/pages/icon/index.wxml | 101 ++++++++++++++++++++++++++++++++++
 packages/icon/README.md       |  16 ++++++
 3 files changed, 119 insertions(+), 1 deletion(-)

diff --git a/example/pages/icon/index.js b/example/pages/icon/index.js
index 02b43364..1c1970ef 100644
--- a/example/pages/icon/index.js
+++ b/example/pages/icon/index.js
@@ -4,7 +4,8 @@ import Page from '../../common/page';
 Page({
   data: {
     icons,
-    active: 0
+    active: 0,
+    demoIcon: 'location-o'
   },
 
   onSwitch(event) {
diff --git a/example/pages/icon/index.wxml b/example/pages/icon/index.wxml
index 14d74a6f..8d9d283f 100644
--- a/example/pages/icon/index.wxml
+++ b/example/pages/icon/index.wxml
@@ -48,4 +48,105 @@
       <view class="text">{{ item }}</view>
     </van-col>
   </van-tab>
+  <van-tab title="用法示例" custom-class="demo-tab-pane">
+    <demo-block title="图标右上角小红点">
+      <van-col
+        custom-class="col"
+        span="6"
+      >
+        <van-icon
+          name="{{ demoIcon }}"
+          size="32px"
+          custom-class="icon"
+        />
+        <view class="text">{{ demoIcon }}</view>
+      </van-col>
+       <van-col
+        custom-class="col"
+        span="6"
+      >
+        <van-icon
+          name="{{ demoIcon }}"
+          size="32px"
+          custom-class="icon"
+          dot
+        />
+        <view class="text">{{ demoIcon }}</view>
+      </van-col>
+    </demo-block>
+    <demo-block title="图标右上角文字提示">
+        <van-col
+          custom-class="col"
+          span="6"
+        >
+          <van-icon
+            name="{{ demoIcon }}"
+            size="32px"
+            custom-class="icon"
+          />
+          <view class="text">{{ demoIcon }}</view>
+        </van-col>
+        <van-col
+          custom-class="col"
+          span="6"
+        >
+          <van-icon
+            name="{{ demoIcon }}"
+            size="32px"
+            custom-class="icon"
+            info="99+"
+          />
+          <view class="text">{{ demoIcon }}</view>
+        </van-col>
+      </demo-block>
+      <demo-block title="图标颜色">
+        <van-col
+          custom-class="col"
+          span="6"
+        >
+          <van-icon
+            name="{{ demoIcon }}"
+            size="32px"
+            custom-class="icon"
+          />
+          <view class="text">{{ demoIcon }}</view>
+        </van-col>
+        <van-col
+          custom-class="col"
+          span="6"
+        >
+          <van-icon
+            name="{{ demoIcon }}"
+            size="32px"
+            custom-class="icon"
+            color="red"
+          />
+          <view class="text">{{ demoIcon }}</view>
+        </van-col>
+      </demo-block>
+      <demo-block title="图标大小">
+        <van-col
+          custom-class="col"
+          span="6"
+        >
+          <van-icon
+            name="{{ demoIcon }}"
+            size="32px"
+            custom-class="icon"
+          />
+          <view class="text">{{ demoIcon }}</view>
+        </van-col>
+        <van-col
+          custom-class="col"
+          span="6"
+        >
+          <van-icon
+            name="{{ demoIcon }}"
+            size="45px"
+            custom-class="icon"
+          />
+          <view class="text">{{ demoIcon }}</view>
+        </van-col>
+      </demo-block>
+    </van-tab>
 </van-tabs>
diff --git a/packages/icon/README.md b/packages/icon/README.md
index e42b4b24..56dc395c 100644
--- a/packages/icon/README.md
+++ b/packages/icon/README.md
@@ -35,6 +35,22 @@
 <van-icon name="chat" info="99+" />
 ```
 
+### 图标颜色
+
+设置`color`属性来控制图标颜色
+
+```html
+<van-icon name="chat" color="red" />
+```
+
+### 图标大小
+
+设置`size`属性来控制图标大小
+
+```html
+<van-icon name="chat" size="50px" />
+```
+
 ## API
 
 ### Props