From 13df6519a45a2971290c8964b4267d2f0c6ae3f1 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Thu, 2 Dec 2021 23:28:37 +0800
Subject: [PATCH] test(Icon): add demo test

---
 example/app.json                              |   1 +
 example/pages/icon/index.js                   |  16 +-
 example/pages/icon/index.wxml                 | 157 +------
 packages/icon/demo/index.json                 |  10 +
 .../icon/demo/index.less                      |   4 -
 packages/icon/demo/index.ts                   | 272 ++++++++++++
 packages/icon/demo/index.wxml                 | 156 +++++++
 .../icon/test/__snapshots__/demo.spec.ts.snap | 400 ++++++++++++++++++
 packages/icon/test/demo.spec.ts               |  11 +
 9 files changed, 852 insertions(+), 175 deletions(-)
 create mode 100644 packages/icon/demo/index.json
 rename example/pages/icon/index.wxss => packages/icon/demo/index.less (91%)
 create mode 100644 packages/icon/demo/index.ts
 create mode 100644 packages/icon/demo/index.wxml
 create mode 100644 packages/icon/test/__snapshots__/demo.spec.ts.snap
 create mode 100644 packages/icon/test/demo.spec.ts

diff --git a/example/app.json b/example/app.json
index 3050378a..d29f3e0b 100644
--- a/example/app.json
+++ b/example/app.json
@@ -91,6 +91,7 @@
     "van-goods-action-icon": "./dist/goods-action-icon/index",
     "van-goods-action-button": "./dist/goods-action-button/index",
     "van-icon": "./dist/icon/index",
+    "van-icon-demo": "./dist/icon/demo/index",
     "van-image": "./dist/image/index",
     "van-loading": "./dist/loading/index",
     "van-nav-bar": "./dist/nav-bar/index",
diff --git a/example/pages/icon/index.js b/example/pages/icon/index.js
index 584167c4..cc11dfda 100644
--- a/example/pages/icon/index.js
+++ b/example/pages/icon/index.js
@@ -1,17 +1,3 @@
-import icons from '../../dist/@vant/icons/src/config';
 import Page from '../../common/page';
 
-Page({
-  data: {
-    icons,
-    active: 0,
-    demoIcon: 'chat-o',
-    demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
-  },
-
-  onSwitch(event) {
-    this.setData({
-      active: event.detail.index
-    });
-  }
-});
+Page();
diff --git a/example/pages/icon/index.wxml b/example/pages/icon/index.wxml
index 62711df4..ef139ded 100644
--- a/example/pages/icon/index.wxml
+++ b/example/pages/icon/index.wxml
@@ -1,156 +1 @@
-<van-tabs
-  active="{{ active }}"
-  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 }}"
-      wx:key="index"
-      custom-class="col"
-      span="6"
-    >
-      <van-icon
-        name="{{ item }}"
-        size="32px"
-        custom-class="icon"
-      />
-      <view class="text">{{ item }}</view>
-    </van-col>
-  </van-tab>
-  <van-tab title="线框风格" custom-class="demo-tab-pane">
-    <van-col
-      wx:for="{{ icons.outline }}"
-      wx:key="index"
-      custom-class="col"
-      span="6"
-    >
-      <van-icon
-        name="{{ item }}"
-        size="32px"
-        custom-class="icon"
-      />
-      <view class="text">{{ item }}</view>
-    </van-col>
-  </van-tab>
-  <van-tab title="实底风格" custom-class="demo-tab-pane">
-    <van-col
-      wx:for="{{ icons.filled }}"
-      wx:key="index"
-      custom-class="col"
-      span="6"
-    >
-      <van-icon
-        name="{{ item }}"
-        size="32px"
-        custom-class="icon"
-      />
-      <view class="text">{{ item }}</view>
-    </van-col>
-  </van-tab>
-</van-tabs>
+<van-icon-demo />
diff --git a/packages/icon/demo/index.json b/packages/icon/demo/index.json
new file mode 100644
index 00000000..cdb627b2
--- /dev/null
+++ b/packages/icon/demo/index.json
@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-col": "../../col/index",
+    "van-tab": "../../tab/index",
+    "van-tabs": "../../tabs/index",
+    "van-icon": "../../icon/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/example/pages/icon/index.wxss b/packages/icon/demo/index.less
similarity index 91%
rename from example/pages/icon/index.wxss
rename to packages/icon/demo/index.less
index 0c001f13..30f9e8af 100644
--- a/example/pages/icon/index.wxss
+++ b/packages/icon/demo/index.less
@@ -1,7 +1,3 @@
-page {
-  padding-bottom: 0;
-}
-
 .col {
   display: inline-block;
   float: none;
diff --git a/packages/icon/demo/index.ts b/packages/icon/demo/index.ts
new file mode 100644
index 00000000..4b2ff04b
--- /dev/null
+++ b/packages/icon/demo/index.ts
@@ -0,0 +1,272 @@
+import { VantComponent } from '../../common/component';
+
+const icons = {
+  name: 'vant-icon',
+  basic: [
+    'arrow',
+    'arrow-left',
+    'arrow-up',
+    'arrow-down',
+    'success',
+    'cross',
+    'plus',
+    'minus',
+    'fail',
+    'circle',
+  ],
+  outline: [
+    // has corresponding filled icon
+    'location-o',
+    'like-o',
+    'star-o',
+    'phone-o',
+    'setting-o',
+    'fire-o',
+    'coupon-o',
+    'cart-o',
+    'shopping-cart-o',
+    'cart-circle-o',
+    'friends-o',
+    'comment-o',
+    'gem-o',
+    'gift-o',
+    'point-gift-o',
+    'send-gift-o',
+    'service-o',
+    'bag-o',
+    'todo-list-o',
+    'balance-list-o',
+    'close',
+    'clock-o',
+    'question-o',
+    'passed',
+    'add-o',
+    'gold-coin-o',
+    'info-o',
+    'play-circle-o',
+    'pause-circle-o',
+    'stop-circle-o',
+    'warning-o',
+    'phone-circle-o',
+    'music-o',
+    'smile-o',
+    'thumb-circle-o',
+    'comment-circle-o',
+    'browsing-history-o',
+    'underway-o',
+    'more-o',
+    'video-o',
+    'shop-o',
+    'shop-collect-o',
+    'share-o',
+    'chat-o',
+    'smile-comment-o',
+    'vip-card-o',
+    'award-o',
+    'diamond-o',
+    'volume-o',
+    'cluster-o',
+    'wap-home-o',
+    'photo-o',
+    'gift-card-o',
+    'expand-o',
+    'medal-o',
+    'good-job-o',
+    'manager-o',
+    'label-o',
+    'bookmark-o',
+    'bill-o',
+    'hot-o',
+    'hot-sale-o',
+    'new-o',
+    'new-arrival-o',
+    'goods-collect-o',
+    'eye-o',
+    'delete-o',
+    'font-o',
+    // without corresponding filled icon
+    'balance-o',
+    'refund-o',
+    'birthday-cake-o',
+    'user-o',
+    'orders-o',
+    'tv-o',
+    'envelop-o',
+    'flag-o',
+    'flower-o',
+    'filter-o',
+    'bar-chart-o',
+    'chart-trending-o',
+    'brush-o',
+    'bullhorn-o',
+    'hotel-o',
+    'cashier-o',
+    'newspaper-o',
+    'warn-o',
+    'notes-o',
+    'calendar-o',
+    'bulb-o',
+    'user-circle-o',
+    'desktop-o',
+    'apps-o',
+    'home-o',
+    'back-top',
+    'search',
+    'points',
+    'edit',
+    'qr',
+    'qr-invalid',
+    'closed-eye',
+    'down',
+    'scan',
+    'revoke',
+    'free-postage',
+    'certificate',
+    'logistics',
+    'contact',
+    'cash-back-record',
+    'after-sale',
+    'exchange',
+    'upgrade',
+    'ellipsis',
+    'description',
+    'records',
+    'sign',
+    'completed',
+    'failure',
+    'ecard-pay',
+    'peer-pay',
+    'balance-pay',
+    'credit-pay',
+    'debit-pay',
+    'cash-on-deliver',
+    'other-pay',
+    'tosend',
+    'pending-payment',
+    'paid',
+    'aim',
+    'discount',
+    'idcard',
+    'replay',
+    'shrink',
+    'shield-o',
+    'guide-o',
+  ],
+  filled: [
+    // has corresponding outline icon
+    'location',
+    'like',
+    'star',
+    'phone',
+    'setting',
+    'fire',
+    'coupon',
+    'cart',
+    'shopping-cart',
+    'cart-circle',
+    'friends',
+    'comment',
+    'gem',
+    'gift',
+    'point-gift',
+    'send-gift',
+    'service',
+    'bag',
+    'todo-list',
+    'balance-list',
+    'clear',
+    'clock',
+    'question',
+    'checked',
+    'add',
+    'gold-coin',
+    'info',
+    'play-circle',
+    'pause-circle',
+    'stop-circle',
+    'warning',
+    'phone-circle',
+    'music',
+    'smile',
+    'thumb-circle',
+    'comment-circle',
+    'browsing-history',
+    'underway',
+    'more',
+    'video',
+    'shop',
+    'shop-collect',
+    'share',
+    'chat',
+    'smile-comment',
+    'vip-card',
+    'award',
+    'diamond',
+    'volume',
+    'cluster',
+    'wap-home',
+    'photo',
+    'gift-card',
+    'expand',
+    'medal',
+    'good-job',
+    'manager',
+    'label',
+    'bookmark',
+    'bill',
+    'hot',
+    'hot-sale',
+    'new',
+    'new-arrival',
+    'goods-collect',
+    'eye',
+    'delete',
+    'font',
+    // without corresponding outline icon
+    'wechat',
+    'wechat-pay',
+    'alipay',
+    'photograph',
+    'youzan-shield',
+    'umbrella-circle',
+    'bell',
+    'printer',
+    'map-marked',
+    'card',
+    'add-square',
+    'live',
+    'lock',
+    'audio',
+    'graphic',
+    'column',
+    'invitation',
+    'play',
+    'pause',
+    'stop',
+    'weapp-nav',
+    'ascending',
+    'descending',
+    'bars',
+    'wap-nav',
+    'enlarge',
+    'photo-fail',
+    'sort',
+  ],
+};
+
+VantComponent({
+  data: {
+    icons,
+    active: 0,
+    demoIcon: 'chat-o',
+    demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
+  },
+
+  methods: {
+    onSwitch(event) {
+      this.setData({
+        active: event.detail.index,
+      });
+    },
+  },
+});
diff --git a/packages/icon/demo/index.wxml b/packages/icon/demo/index.wxml
new file mode 100644
index 00000000..a7b5e73a
--- /dev/null
+++ b/packages/icon/demo/index.wxml
@@ -0,0 +1,156 @@
+<van-tabs
+  active="{{ active }}"
+  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 }}"
+      wx:key="index"
+      custom-class="col"
+      span="6"
+    >
+      <van-icon
+        name="{{ item }}"
+        size="32px"
+        custom-class="icon"
+      />
+      <view class="text">{{ item }}</view>
+    </van-col>
+  </van-tab>
+  <van-tab title="线框风格" custom-class="demo-tab-pane">
+    <van-col
+      wx:for="{{ icons.outline }}"
+      wx:key="index"
+      custom-class="col"
+      span="6"
+    >
+      <van-icon
+        name="{{ item }}"
+        size="32px"
+        custom-class="icon"
+      />
+      <view class="text">{{ item }}</view>
+    </van-col>
+  </van-tab>
+  <van-tab title="实底风格" custom-class="demo-tab-pane">
+    <van-col
+      wx:for="{{ icons.filled }}"
+      wx:key="index"
+      custom-class="col"
+      span="6"
+    >
+      <van-icon
+        name="{{ item }}"
+        size="32px"
+        custom-class="icon"
+      />
+      <view class="text">{{ item }}</view>
+    </van-col>
+  </van-tab>
+</van-tabs>
diff --git a/packages/icon/test/__snapshots__/demo.spec.ts.snap b/packages/icon/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..38a59369
--- /dev/null
+++ b/packages/icon/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,400 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<main>
+  <van-tabs
+    bind:change="onSwitch"
+  >
+    <wx-view
+      class="custom-class van-tabs van-tabs--line"
+    >
+      <van-sticky
+        bind:scroll="onTouchScroll"
+      >
+        <wx-view
+          class="custom-class van-sticky"
+          style="z-index:1"
+        >
+          <wx-view
+            class="van-sticky-wrap"
+            style="z-index:1"
+          >
+            <wx-view
+              class="van-tabs__wrap "
+            >
+              <wx-scroll-view
+                class="van-tabs__scroll van-tabs__scroll--line"
+                scrollLeft="{{0}}"
+                scrollWithAnimation="{{false}}"
+                scrollX="{{false}}"
+                style="border-color: #1989fa"
+              >
+                <wx-view
+                  class="van-tabs__nav van-tabs__nav--line nav-class"
+                  style=""
+                >
+                  <wx-view
+                    class="van-tabs__line"
+                    style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px);background-color:#1989fa"
+                  />
+                  <wx-view
+                    class="tab-class tab-active-class van-ellipsis van-tab van-tab--active"
+                    data-index="{{0}}"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-view
+                      class="van-ellipsis"
+                      style=""
+                    >
+                      
+              用法示例
+              
+                    </wx-view>
+                  </wx-view>
+                  <wx-view
+                    class="tab-class van-ellipsis van-tab"
+                    data-index="{{1}}"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-view
+                      class="van-ellipsis"
+                      style=""
+                    >
+                      
+              基础图标
+              
+                    </wx-view>
+                  </wx-view>
+                  <wx-view
+                    class="tab-class van-ellipsis van-tab"
+                    data-index="{{2}}"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-view
+                      class="van-ellipsis"
+                      style=""
+                    >
+                      
+              线框风格
+              
+                    </wx-view>
+                  </wx-view>
+                  <wx-view
+                    class="tab-class van-ellipsis van-tab"
+                    data-index="{{3}}"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-view
+                      class="van-ellipsis"
+                      style=""
+                    >
+                      
+              实底风格
+              
+                    </wx-view>
+                  </wx-view>
+                </wx-view>
+              </wx-scroll-view>
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-sticky>
+      <wx-view
+        class="van-tabs__content"
+        bind:touchcancel="onTouchEnd"
+        bind:touchend="onTouchEnd"
+        bind:touchmove="onTouchMove"
+        bind:touchstart="onTouchStart"
+      >
+        <wx-view
+          class="van-tabs__track van-tabs__track"
+          style=""
+        >
+          <van-tab
+            customClass="demo-tab-pane"
+          >
+            <wx-view
+              class="custom-class van-tab__pane van-tab__pane--active"
+              style=""
+            >
+              <demo-block>
+                <wx-view
+                  class="custom-class demo-block van-clearfix "
+                >
+                  <wx-view
+                    class="demo-block__title"
+                  >
+                    基础用法
+                  </wx-view>
+                  <van-col
+                    customClass="col"
+                  >
+                    <wx-view
+                      class="custom-class van-col van-col--6 "
+                      style=""
+                    >
+                      <van-icon
+                        customClass="icon"
+                      >
+                        <wx-view
+                          class="custom-class van-icon van-icon-chat-o"
+                          style="font-size:32px"
+                          bind:tap="onClick"
+                        />
+                      </van-icon>
+                    </wx-view>
+                  </van-col>
+                  <van-col
+                    customClass="col"
+                  >
+                    <wx-view
+                      class="custom-class van-col van-col--6 "
+                      style=""
+                    >
+                      <van-icon
+                        customClass="icon"
+                      >
+                        <wx-view
+                          class="custom-class van-icon van-icon--image"
+                          style="font-size:32px"
+                          bind:tap="onClick"
+                        >
+                          <wx-image
+                            class="van-icon__image"
+                            mode="aspectFit"
+                            src="https://b.yzcdn.cn/vant/icon-demo-1126.png"
+                          />
+                        </wx-view>
+                      </van-icon>
+                    </wx-view>
+                  </van-col>
+                </wx-view>
+              </demo-block>
+              <demo-block>
+                <wx-view
+                  class="custom-class demo-block van-clearfix "
+                >
+                  <wx-view
+                    class="demo-block__title"
+                  >
+                    提示信息
+                  </wx-view>
+                  <van-col
+                    customClass="col"
+                  >
+                    <wx-view
+                      class="custom-class van-col van-col--6 "
+                      style=""
+                    >
+                      <van-icon
+                        customClass="icon"
+                      >
+                        <wx-view
+                          class="custom-class van-icon van-icon-chat-o"
+                          style="font-size:32px"
+                          bind:tap="onClick"
+                        >
+                          <van-info
+                            customClass="van-icon__info"
+                          >
+                            <wx-view
+                              class="van-info van-info van-info--dot custom-class"
+                              style=""
+                            >
+                              
+                            </wx-view>
+                          </van-info>
+                        </wx-view>
+                      </van-icon>
+                    </wx-view>
+                  </van-col>
+                  <van-col
+                    customClass="col"
+                  >
+                    <wx-view
+                      class="custom-class van-col van-col--6 "
+                      style=""
+                    >
+                      <van-icon
+                        customClass="icon"
+                      >
+                        <wx-view
+                          class="custom-class van-icon van-icon-chat-o"
+                          style="font-size:32px"
+                          bind:tap="onClick"
+                        >
+                          <van-info
+                            customClass="van-icon__info"
+                          >
+                            <wx-view
+                              class="van-info van-info custom-class"
+                              style=""
+                            >
+                              9
+                            </wx-view>
+                          </van-info>
+                        </wx-view>
+                      </van-icon>
+                    </wx-view>
+                  </van-col>
+                  <van-col
+                    customClass="col"
+                  >
+                    <wx-view
+                      class="custom-class van-col van-col--6 "
+                      style=""
+                    >
+                      <van-icon
+                        customClass="icon"
+                      >
+                        <wx-view
+                          class="custom-class van-icon van-icon-chat-o"
+                          style="font-size:32px"
+                          bind:tap="onClick"
+                        >
+                          <van-info
+                            customClass="van-icon__info"
+                          >
+                            <wx-view
+                              class="van-info van-info custom-class"
+                              style=""
+                            >
+                              99+
+                            </wx-view>
+                          </van-info>
+                        </wx-view>
+                      </van-icon>
+                    </wx-view>
+                  </van-col>
+                </wx-view>
+              </demo-block>
+              <demo-block>
+                <wx-view
+                  class="custom-class demo-block van-clearfix "
+                >
+                  <wx-view
+                    class="demo-block__title"
+                  >
+                    图标颜色
+                  </wx-view>
+                  <van-col
+                    customClass="col"
+                  >
+                    <wx-view
+                      class="custom-class van-col van-col--6 "
+                      style=""
+                    >
+                      <van-icon
+                        customClass="icon"
+                      >
+                        <wx-view
+                          class="custom-class van-icon van-icon-chat-o"
+                          style="color:#1989fa;font-size:32px"
+                          bind:tap="onClick"
+                        />
+                      </van-icon>
+                    </wx-view>
+                  </van-col>
+                  <van-col
+                    customClass="col"
+                  >
+                    <wx-view
+                      class="custom-class van-col van-col--6 "
+                      style=""
+                    >
+                      <van-icon
+                        customClass="icon"
+                      >
+                        <wx-view
+                          class="custom-class van-icon van-icon-chat-o"
+                          style="color:#07c160;font-size:32px"
+                          bind:tap="onClick"
+                        />
+                      </van-icon>
+                    </wx-view>
+                  </van-col>
+                </wx-view>
+              </demo-block>
+              <demo-block>
+                <wx-view
+                  class="custom-class demo-block van-clearfix "
+                >
+                  <wx-view
+                    class="demo-block__title"
+                  >
+                    图标大小
+                  </wx-view>
+                  <van-col
+                    customClass="col"
+                  >
+                    <wx-view
+                      class="custom-class van-col van-col--6 "
+                      style=""
+                    >
+                      <van-icon
+                        customClass="icon"
+                      >
+                        <wx-view
+                          class="custom-class van-icon van-icon-chat-o"
+                          style="font-size:40px"
+                          bind:tap="onClick"
+                        />
+                      </van-icon>
+                    </wx-view>
+                  </van-col>
+                  <van-col
+                    customClass="col"
+                  >
+                    <wx-view
+                      class="custom-class van-col van-col--6 "
+                      style=""
+                    >
+                      <van-icon
+                        customClass="icon"
+                      >
+                        <wx-view
+                          class="custom-class van-icon van-icon-chat-o"
+                          style="font-size:3rem"
+                          bind:tap="onClick"
+                        />
+                      </van-icon>
+                    </wx-view>
+                  </van-col>
+                </wx-view>
+              </demo-block>
+            </wx-view>
+          </van-tab>
+          <van-tab
+            customClass="demo-tab-pane"
+          >
+            <wx-view
+              class="custom-class van-tab__pane van-tab__pane--inactive"
+              style="display: none;"
+            />
+          </van-tab>
+          <van-tab
+            customClass="demo-tab-pane"
+          >
+            <wx-view
+              class="custom-class van-tab__pane van-tab__pane--inactive"
+              style="display: none;"
+            />
+          </van-tab>
+          <van-tab
+            customClass="demo-tab-pane"
+          >
+            <wx-view
+              class="custom-class van-tab__pane van-tab__pane--inactive"
+              style="display: none;"
+            />
+          </van-tab>
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </van-tabs>
+</main>
+`;
diff --git a/packages/icon/test/demo.spec.ts b/packages/icon/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/icon/test/demo.spec.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+    rootPath: path.resolve(__dirname, '../../'),
+  });
+  const comp = simulate.render(id);
+  comp.attach(document.createElement('parent-wrapper'));
+  expect(comp.toJSON()).toMatchSnapshot();
+});