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 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ item }}
-
-
-
-
-
- {{ item }}
-
-
-
-
-
- {{ item }}
-
-
-
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+ {{ item }}
+
+
+
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`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 用法示例
+
+
+
+
+
+
+ 基础图标
+
+
+
+
+
+
+ 线框风格
+
+
+
+
+
+
+ 实底风格
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 基础用法
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提示信息
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+
+
+
+
+
+
+ 99+
+
+
+
+
+
+
+
+
+
+
+
+ 图标颜色
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 图标大小
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
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();
+});