From 088c0b840d6e7e19a12d17cc3219918a401c5ea4 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Fri, 7 Feb 2020 16:27:48 +0800
Subject: [PATCH] docs(Icon): unify example with vant (#2728)

---
 example/pages/icon/index.js   |   3 +-
 example/pages/icon/index.wxml | 206 +++++++++++++++++-----------------
 example/pages/icon/index.wxss |  16 +--
 3 files changed, 116 insertions(+), 109 deletions(-)

diff --git a/example/pages/icon/index.js b/example/pages/icon/index.js
index 1c1970ef..584167c4 100644
--- a/example/pages/icon/index.js
+++ b/example/pages/icon/index.js
@@ -5,7 +5,8 @@ Page({
   data: {
     icons,
     active: 0,
-    demoIcon: 'location-o'
+    demoIcon: 'chat-o',
+    demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
   },
 
   onSwitch(event) {
diff --git a/example/pages/icon/index.wxml b/example/pages/icon/index.wxml
index 8d9d283f..62711df4 100644
--- a/example/pages/icon/index.wxml
+++ b/example/pages/icon/index.wxml
@@ -3,6 +3,111 @@
   color="#1989fa"
   bind:change="onSwitch"
 >
+<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"
+      />
+    </van-col>
+     <van-col
+      custom-class="col"
+      span="6"
+    >
+      <van-icon
+        name="{{ demoImage }}"
+        size="32px"
+        custom-class="icon"
+      />
+    </van-col>
+  </demo-block>
+  <demo-block title="提示信息">
+    <van-col
+      custom-class="col"
+      span="6"
+    >
+      <van-icon
+        name="{{ demoIcon }}"
+        size="32px"
+        custom-class="icon"
+        dot
+      />
+    </van-col>
+    <van-col
+      custom-class="col"
+      span="6"
+    >
+      <van-icon
+        name="{{ demoIcon }}"
+        size="32px"
+        custom-class="icon"
+        info="9"
+      />
+    </van-col>
+    <van-col
+      custom-class="col"
+      span="6"
+    >
+      <van-icon
+        name="{{ demoIcon }}"
+        size="32px"
+        custom-class="icon"
+        info="99+"
+      />
+    </van-col>
+  </demo-block>
+    <demo-block title="图标颜色">
+      <van-col
+        custom-class="col"
+        span="6"
+      >
+        <van-icon
+          name="{{ demoIcon }}"
+          size="32px"
+          custom-class="icon"
+          color="#1989fa"
+        />
+      </van-col>
+      <van-col
+        custom-class="col"
+        span="6"
+      >
+        <van-icon
+          name="{{ demoIcon }}"
+          size="32px"
+          custom-class="icon"
+          color="#07c160"
+        />
+      </van-col>
+    </demo-block>
+    <demo-block title="图标大小">
+      <van-col
+        custom-class="col"
+        span="6"
+      >
+        <van-icon
+          name="{{ demoIcon }}"
+          size="40"
+          custom-class="icon"
+        />
+      </van-col>
+      <van-col
+        custom-class="col"
+        span="6"
+      >
+        <van-icon
+          name="{{ demoIcon }}"
+          size="3rem"
+          custom-class="icon"
+        />
+      </van-col>
+    </demo-block>
+  </van-tab>
   <van-tab title="基础图标" custom-class="demo-tab-pane">
     <van-col
       wx:for="{{ icons.basic }}"
@@ -48,105 +153,4 @@
       <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/example/pages/icon/index.wxss b/example/pages/icon/index.wxss
index 9758e9e3..17f7fcd9 100644
--- a/example/pages/icon/index.wxss
+++ b/example/pages/icon/index.wxss
@@ -3,24 +3,26 @@ page {
 }
 
 .col {
-  text-align: center;
-  height: 100px;
-  float: none;
   display: inline-block;
+  float: none;
+  text-align: center;
   vertical-align: middle;
 }
 
 .icon {
   display: block;
+  margin: 16px 0;
   color: #323233;
-  margin: 20px 0 10px;
 }
 
 .text {
-  font-size: 12px;
+  display: block;
+  height: 36px;
+  margin: -4px 0 4px;
   padding: 0 5px;
-  line-height: 14px;
-  color: #7d7e80;
+  color: #646566;
+  font-size: 12px;
+  line-height: 18px;
 }
 
 .demo-tab-pane {