Merge branch 'dev' of https://github.com/youzan/vant into dev

build/build-iconfont.js

@@ -33,7 +33,8 @@ const prevTTFs = glob.sync(path.join(iconDir, '*.ttf'));
 prevTTFs.forEach(ttf => fs.removeSync(ttf));
 
 // rename svg
-config.glyphs.forEach((icon, index) => {
+const icons = [...config.basic, ...config.outline, ...config.filled];
+icons.forEach((icon, index) => {
   const src = path.join(svgDir, icon.src);
   if (fs.existsSync(src)) {
     fs.renameSync(src, path.join(svgDir, icon.css + '.svg'));
@@ -65,10 +66,7 @@ gulp.task('ttf', () => {
 
 gulp.task('default', ['ttf'], () => {
   // generate icon-local.css
-  fs.writeFileSync(
+  fs.writeFileSync(path.join(iconDir, 'local.less'), local(config.name, ttf));
-    path.join(iconDir, 'local.less'),
-    local(config.name, ttf)
-  );
 
   // remove svg
   fs.removeSync(svgDir);

docs/src/WapApp.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <van-nav-bar
-      v-show="title"
+      v-show="title && showNav"
       class="van-doc-nav-bar"
       :title="title"
       left-arrow
@@ -22,6 +22,17 @@
 </template>
 
 <script>
+function getQueryString(name) {
+  const arr = location.search.substr(1).split('&');
+  for (let i = 0, l = arr.length; i < l; i++) {
+    const item = arr[i].split('=');
+    if (item.shift() === name) {
+      return decodeURIComponent(item.join('='));
+    }
+  }
+  return '';
+}
+
 export default {
   computed: {
     title() {
@@ -30,7 +41,13 @@ export default {
     },
 
     demoLink() {
-      return `https://github.com/youzan/vant/blob/dev/packages/${this.$route.meta.path}/demo/index.vue`;
+      return `https://github.com/youzan/vant/blob/dev/packages/${
+        this.$route.meta.path
+      }/demo/index.vue`;
+    },
+
+    showNav() {
+      return getQueryString('hide_nav') !== '1';
     }
   },
 

package.json

@@ -57,21 +57,21 @@
   "author": "youzanfe",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
+    "@babel/runtime": "^7.1.5",
     "vue-lazyload": "1.2.3"
   },
   "peerDependencies": {
     "vue": ">= 2.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
+    "@babel/core": "^7.1.6",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-object-assign": "^7.0.0",
     "@babel/plugin-transform-runtime": "^7.1.0",
     "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-env": "^7.1.6",
-    "@vue/server-test-utils": "^1.0.0-beta.25",
+    "@vue/server-test-utils": "^1.0.0-beta.26",
-    "@vue/test-utils": "^1.0.0-beta.25",
+    "@vue/test-utils": "^1.0.0-beta.26",
     "autoprefixer": "^9.3.1",
     "babel-core": "^7.0.0-0",
     "babel-jest": "^23.6.0",
@@ -79,10 +79,10 @@
     "codecov": "^3.1.0",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.1",
-    "dependency-tree": "^6.2.1",
+    "dependency-tree": "^6.3.0",
     "eslint": "^5.9.0",
     "eslint-plugin-vue-libs": "^3.0.0",
-    "fast-glob": "^2.2.3",
+    "fast-glob": "^2.2.4",
     "fast-vue-md-loader": "^1.0.3",
     "gh-pages": "^2.0.1",
     "gulp": "^3.9.1",
@@ -92,35 +92,35 @@
     "gulp-less": "^4.0.1",
     "gulp-postcss": "^8.0.0",
     "html-webpack-plugin": "3.2.0",
-    "husky": "^1.1.3",
+    "husky": "^1.2.0",
     "jest": "^23.6.0",
     "jest-serializer-vue": "^2.0.2",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
-    "lint-staged": "^8.0.4",
+    "lint-staged": "^8.1.0",
     "md5-file": "^4.0.0",
-    "postcss": "^7.0.5",
+    "postcss": "^7.0.6",
     "postcss-loader": "^3.0.0",
     "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "^2.5.4",
-    "shelljs": "^0.8.1",
+    "shelljs": "^0.8.3",
     "signale": "^1.3.0",
     "style-loader": "^0.23.1",
-    "stylelint": "^9.7.1",
+    "stylelint": "^9.8.0",
     "stylelint-config-standard": "^18.2.0",
     "uppercamelcase": "^3.0.0",
     "url-loader": "^1.1.2",
-    "vant-doc": "1.0.18",
+    "vant-doc": "1.0.19",
     "vue": "2.5.17",
-    "vue-jest": "^3.0.0",
+    "vue-jest": "^3.0.1",
     "vue-loader": "^15.4.2",
-    "vue-router": "^3.0.1",
+    "vue-router": "^3.0.2",
     "vue-server-renderer": "^2.5.17",
     "vue-sfc-compiler": "^0.1.3",
     "vue-template-compiler": "2.5.17",
     "vue-template-es2015-compiler": "^1.6.0",
-    "webpack": "^4.23.1",
+    "webpack": "^4.26.1",
     "webpack-cli": "^3.1.2",
-    "webpack-serve": "^2.0.2"
+    "webpack-serve": "^2.0.3"
   }
 }

packages/address-list/test/__snapshots__/demo.spec.js.snap

@@ -10,20 +10,22 @@ exports[`renders demo correctly 1`] = `
             <!---->
             <!---->
             <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
+              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
             </div>
             <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
               <!---->
+              <!---->
             </i>
           </div>
           <div class="van-cell van-cell--clickable van-address-item">
             <!---->
             <!---->
             <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div> <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
+              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div> <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
             </div>
             <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
               <!---->
+              <!---->
             </i>
           </div>
         </div>
@@ -36,10 +38,11 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div> <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div> <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
           </div>
           <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div>
       </div>

packages/cell/index.less

@@ -43,30 +43,21 @@
     }
   }
 
-  &__left-icon {
+  &__left-icon,
+  &__right-icon {
+    height: 24px;
     min-width: 1em;
     font-size: 16px;
     line-height: 24px;
+  }
+
+  &__left-icon {
     margin-right: 5px;
   }
 
   &__right-icon {
     color: @gray-dark;
-    font-size: 12px;
-    line-height: 24px;
     margin-left: 5px;
-
-    &--left::before {
-      transform: rotate(180deg);
-    }
-
-    &--up::before {
-      transform: rotate(-90deg);
-    }
-
-    &--down::before {
-      transform: rotate(90deg);
-    }
   }
 
   &--clickable {

packages/cell/index.vue

@@ -42,8 +42,8 @@
     <slot name="right-icon">
       <icon
         v-if="isLink"
-        :class="b('right-icon', arrowDirection)"
+        :class="b('right-icon')"
-        name="arrow"
+        :name="arrowIcon"
       />
     </slot>
     <slot name="extra" />
@@ -84,6 +84,12 @@ export default create({
     }
   },
 
+  computed: {
+    arrowIcon() {
+      return this.arrowDirection ? `arrow-${this.arrowDirection}` : 'arrow';
+    }
+  },
+
   methods: {
     onClick() {
       this.$emit('click');

packages/cell/test/__snapshots__/demo.spec.js.snap

@@ -44,6 +44,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-cell">
       <i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
       <div class="van-cell__title"><span>单元格</span>
         <!---->
@@ -69,6 +70,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
     </div>
     <div class="van-cell van-cell--clickable">
@@ -79,6 +81,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell__value"><span>内容</span></div>
       <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
     </div>
     <div class="van-cell van-cell--clickable">
@@ -87,7 +90,8 @@ exports[`renders demo correctly 1`] = `
         <!---->
       </div>
       <div class="van-cell__value"><span>内容</span></div>
-      <i class="van-icon van-icon-arrow van-cell__right-icon van-cell__right-icon--down" style="color:undefined;font-size:undefined;">
+      <i class="van-icon van-icon-arrow-down van-cell__right-icon" style="color:undefined;font-size:undefined;">
+        <!---->
         <!---->
       </i>
     </div>
@@ -101,6 +105,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
     </div>
     <div class="van-cell van-cell--clickable">
@@ -111,6 +116,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
     </div>
   </div>
@@ -118,16 +124,19 @@ exports[`renders demo correctly 1`] = `
     <div class="van-cell van-cell--clickable">
       <i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
       <div class="van-cell__title"><span class="custom-text">单元格</span> <span class="van-tag" style="background-color:#f44;">标签</span></div>
       <div class="van-cell__value"><span>内容</span></div>
       <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
     </div>
     <div class="van-cell van-cell--clickable">
       <i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
       <div class="van-cell__title"><span>单元格</span>
         <!---->
@@ -135,6 +144,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
     </div>
     <div class="van-cell">
@@ -145,6 +155,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <i class="custom-icon van-icon van-icon-search" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
     </div>
   </div>

packages/cell/zh-CN.md

@@ -91,7 +91,7 @@ Vue.use(Cell).use(CellGroup);
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| icon | 左侧图标，可选值见 Icon 组件 | `String` | - | - |
+| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - |
 | title | 左侧标题 | `String | Number` | - | - |
 | value | 右侧内容 | `String | Number` | - | - |
 | label | 标题下方的描述信息 | `String` | - | - |

packages/checkbox/demo/index.vue

@@ -149,8 +149,7 @@ export default {
   }
 
   img {
-    width: 20px;
+    height: 20px;
-    display: block;
   }
 }
 </style>

packages/checkbox/index.less

@@ -6,6 +6,7 @@
 
   &__icon,
   &__label {
+    height: @checkbox-size;
     display: inline-block;
     vertical-align: middle;
     line-height: @checkbox-size;
@@ -13,7 +14,7 @@
 
   &__icon {
     .van-icon {
-      font-size: 12px;
+      font-size: 14px;
       color: transparent;
       text-align: center;
       line-height: inherit;

packages/checkbox/test/__snapshots__/demo.spec.js.snap

@@ -7,6 +7,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
         <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i>
       </div> <span class="van-checkbox__label">复选框</span></div>
   </div>
@@ -15,6 +16,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled">
         <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i>
       </div> <span class="van-checkbox__label">
       复选框
@@ -23,6 +25,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked">
         <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i>
       </div> <span class="van-checkbox__label">
       复选框
@@ -33,6 +36,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
         <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;border-color:#4b0;background-color:#4b0;">
           <!---->
+          <!---->
         </i>
       </div> <span class="van-checkbox__label">
       自定义颜色
@@ -52,6 +56,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
           <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div> <span class="van-checkbox__label">
         复选框 a
@@ -60,6 +65,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
           <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div> <span class="van-checkbox__label">
         复选框 b
@@ -68,6 +74,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-checkbox__icon van-checkbox__icon--round">
           <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div> <span class="van-checkbox__label">
         复选框 c
@@ -80,6 +87,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-checkbox__icon van-checkbox__icon--round">
           <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div> <span class="van-checkbox__label">
         复选框 a
@@ -88,6 +96,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-checkbox__icon van-checkbox__icon--round">
           <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div> <span class="van-checkbox__label">
         复选框 b
@@ -96,6 +105,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-checkbox__icon van-checkbox__icon--round">
           <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div> <span class="van-checkbox__label">
         复选框 c
@@ -115,6 +125,7 @@ exports[`renders demo correctly 1`] = `
               <div class="van-checkbox__icon van-checkbox__icon--round">
                 <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
                   <!---->
+                  <!---->
                 </i>
               </div>
               <!---->
@@ -132,6 +143,7 @@ exports[`renders demo correctly 1`] = `
               <div class="van-checkbox__icon van-checkbox__icon--round">
                 <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
                   <!---->
+                  <!---->
                 </i>
               </div>
               <!---->
@@ -149,6 +161,7 @@ exports[`renders demo correctly 1`] = `
               <div class="van-checkbox__icon van-checkbox__icon--round">
                 <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
                   <!---->
+                  <!---->
                 </i>
               </div>
               <!---->

packages/collapse/test/__snapshots__/demo.spec.js.snap

@@ -13,6 +13,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-cell__value"> </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div>
         <div class="van-collapse-item__wrapper">
@@ -28,6 +29,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-cell__value"> </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div>
         <!---->
@@ -41,6 +43,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-cell__value"> </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div>
         <!---->
@@ -58,6 +61,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-cell__value"> </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div>
         <div class="van-collapse-item__wrapper">
@@ -73,6 +77,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-cell__value"> </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div>
         <!---->
@@ -86,6 +91,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-cell__value"> </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div>
         <!---->
@@ -101,12 +107,14 @@ exports[`renders demo correctly 1`] = `
             <div>有赞微商城
               <i class="van-icon van-icon-question" style="color:undefined;font-size:undefined;">
                 <!---->
+                <!---->
               </i>
             </div>
           </div>
           <div class="van-cell__value"> </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div>
         <!---->
@@ -115,6 +123,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell van-cell--clickable van-collapse-item__title">
           <i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
           <div class="van-cell__title"><span>有赞零售</span>
             <!---->
@@ -122,6 +131,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-cell__value"> </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div>
         <!---->

packages/collapse/zh-CN.md

@@ -98,7 +98,7 @@ export default {
 |------|------|------|------|------|------|
 | name | 唯一标识符，默认为索引值 | `String | Number` | `index` | - |
 | title | 标题栏左侧内容 | `String | Number` | - | - |
-| icon | 标题栏左侧图标，可选值见 Icon 组件 | `String` | - | 1.2.1 |
+| icon | 标题栏左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.2.1 |
 | value | 标题栏右侧内容 | `String | Number` | - | 1.2.1 |
 | label | 标题栏描述信息 | `String` | - | 1.2.1 |
 | border | 是否显示内边框 | `Boolean` | `true` | 1.2.1 |

packages/contact-card/test/__snapshots__/demo.spec.js.snap

@@ -6,11 +6,13 @@ exports[`renders demo correctly 1`] = `
     <div class="van-cell van-cell--center van-cell--borderless van-cell--clickable van-contact-card van-contact-card--add">
       <i class="van-icon van-icon-add2 van-cell__left-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
       <!---->
       <div class="van-cell__value van-cell__value--alone">添加联系人</div>
       <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
     </div>
     <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
@@ -21,10 +23,11 @@ exports[`renders demo correctly 1`] = `
               <!---->
               <!---->
               <div class="van-cell__value van-cell__value--alone">
-                <div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span></div>
+                <div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span></div>
               </div>
               <i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;">
                 <!---->
+                <!---->
               </i>
             </div>
           </div>
@@ -81,6 +84,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-cell van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
       <i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
       <!---->
       <div class="van-cell__value van-cell__value--alone">

packages/coupon-cell/index.vue

@@ -1,15 +1,12 @@
 <template>
-  <cell-group
+  <cell
     :class="b()"
+    :title="title || $t('title')"
+    :value="value"
     :border="border"
-  >
+    :is-link="editable"
-    <cell
+    @click="$emit('click')"
-      :title="title || $t('title')"
+  />
-      :value="value"
-      :is-link="editable"
-      @click="$emit('click')"
-    />
-  </cell-group>
 </template>
 
 <script>

packages/coupon-list/Item.vue

@@ -10,8 +10,8 @@
         <p>{{ validPeriod }}</p>
         <checkbox
           v-if="chosen"
+          :value="true"
           :class="b('corner')"
-          value
         />
       </div>
     </div>

packages/coupon-list/en-US.md

@@ -73,7 +73,7 @@ export default {
 | chosen-coupon | Index of chosen coupon | `Number` | `-1` |
 | coupons | Coupon list | `Array` | `[]` |
 | editable | Cell editable | `Boolean` | `true` |
-| border | Whether to show outer border | `Boolean` | `true` |
+| border | Whether to show innner border | `Boolean` | `true` |
 
 ### CouponList API
 

packages/coupon-list/test/__snapshots__/demo.spec.js.snap

@@ -3,17 +3,16 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
+    <div class="van-cell van-cell--clickable van-coupon-cell">
-      <div class="van-cell van-cell--clickable">
+      <!---->
+      <div class="van-cell__title"><span>优惠券</span>
         <!---->
-        <div class="van-cell__title"><span>优惠券</span>
-          <!---->
-        </div>
-        <div class="van-cell__value"><span>你有 2 个可用优惠</span></div>
-        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
-          <!---->
-        </i>
       </div>
+      <div class="van-cell__value"><span>你有 2 个可用优惠</span></div>
+      <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
+        <!---->
+        <!---->
+      </i>
     </div>
     <!---->
   </div>

packages/coupon-list/test/__snapshots__/index.spec.js.snap

@@ -1,31 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`coupon cell 1`] = `
-<div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
+<div class="van-cell van-cell--clickable van-coupon-cell">
-  <div class="van-cell van-cell--clickable">
+  <!---->
+  <div class="van-cell__title"><span>优惠券</span>
     <!---->
-    <div class="van-cell__title"><span>优惠券</span>
-      <!---->
-    </div>
-    <div class="van-cell__value"><span>使用优惠</span></div>
-    <i class="van-icon van-icon-arrow van-cell__right-icon">
-      <!---->
-    </i>
   </div>
+  <div class="van-cell__value"><span>使用优惠</span></div>
+  <i class="van-icon van-icon-arrow van-cell__right-icon">
+    <!---->
+    <!---->
+  </i>
 </div>
 `;
 
 exports[`coupon cell 2`] = `
-<div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
+<div class="van-cell van-cell--clickable van-coupon-cell">
-  <div class="van-cell van-cell--clickable">
+  <!---->
+  <div class="van-cell__title"><span>优惠券</span>
     <!---->
-    <div class="van-cell__title"><span>优惠券</span>
-      <!---->
-    </div>
-    <div class="van-cell__value"><span>-￥1.00</span></div>
-    <i class="van-icon van-icon-arrow van-cell__right-icon">
-      <!---->
-    </i>
   </div>
+  <div class="van-cell__value"><span>-￥1.00</span></div>
+  <i class="van-icon van-icon-arrow van-cell__right-icon">
+    <!---->
+    <!---->
+  </i>
 </div>
 `;

packages/coupon-list/zh-CN.md

@@ -74,7 +74,7 @@ export default {
 | chosen-coupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
 | coupons | 可用优惠券列表 | `Array` | `[]` | - |
 | editable | 能否切换优惠券 | `Boolean` | `true` | - |
-| border | 是否显示外边框 | `Boolean` | `true` | 1.3.10 |
+| border | 是否显示内边框 | `Boolean` | `true` | 1.3.10 |
 
 ### CouponList API
 

packages/field/test/__snapshots__/demo.spec.js.snap

@@ -34,6 +34,7 @@ exports[`renders demo correctly 1`] = `
             <div class="van-field__icon">
               <i class="van-icon van-icon-question" style="color:undefined;font-size:undefined;">
                 <!---->
+                <!---->
               </i>
             </div>
             <!---->
@@ -65,6 +66,7 @@ exports[`renders demo correctly 1`] = `
       <div disabled="disabled" class="van-cell van-field">
         <i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i>
         <div class="van-cell__title"><span>用户名</span>
           <!---->

packages/field/test/__snapshots__/index.spec.js.snap

@@ -26,6 +26,7 @@ exports[`clearable 2`] = `
       <input type="text" class="van-field__control">
       <i class="van-icon van-icon-clear van-field__clear">
         <!---->
+        <!---->
       </i>
       <!---->
       <!---->

packages/field/zh-CN.md

@@ -131,8 +131,8 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 | label-align | 文本对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
 | input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
 | autosize | 自适应内容高度，只对 textarea 有效，可传入对象,<br>如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` | 1.0.0 |
-| icon | 输入框尾部图标，可选值见 Icon 组件 | `String` | - | - |
+| icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - |
-| left-icon | 输入框左侧图标，可选值见 Icon 组件 | `String` | - | 1.1.4 |
+| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.1.4 |
 
 ### Event
 

packages/goods-action/test/__snapshots__/demo.spec.js.snap

@@ -7,10 +7,12 @@ exports[`renders demo correctly 1`] = `
       <div class="van-hairline van-goods-action-mini-btn">
         <i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i> 客服</div>
       <div class="van-hairline van-goods-action-mini-btn">
         <i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i> 购物车</div>
       <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button>
       <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
@@ -21,9 +23,11 @@ exports[`renders demo correctly 1`] = `
       <div class="van-hairline van-goods-action-mini-btn">
         <i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i> 客服</div>
       <div class="van-hairline van-goods-action-mini-btn">
         <i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
+          <!---->
           <div class="van-info">
             5
           </div>
@@ -31,6 +35,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-hairline van-goods-action-mini-btn">
         <i class="van-icon van-icon-shop van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i> 店铺</div>
       <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button>
       <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>

packages/icon/config/index.js

@@ -1,6 +1,32 @@
 module.exports = {
   name: 'vant-icon',
-  glyphs: [
+  basic: [
+    {
+      src: 'success.svg',
+      css: 'success'
+    },
+    {
+      src: 'fail.svg',
+      css: 'fail'
+    },
+    {
+      src: 'arrow.svg',
+      css: 'arrow'
+    },
+    {
+      src: 'arrow-left.svg',
+      css: 'arrow-left'
+    },
+    {
+      src: 'arrow-up.svg',
+      css: 'arrow-up'
+    },
+    {
+      src: 'arrow-down.svg',
+      css: 'arrow-down'
+    }
+  ],
+  outline: [
     {
       src: 'close.svg',
       css: 'close'
@@ -65,6 +91,10 @@ module.exports = {
       src: '喜欢.svg',
       css: 'like-o'
     },
+    {
+      src: 'star-o.svg',
+      css: 'star-o'
+    },
     {
       src: '物流.svg',
       css: 'logistics'
@@ -201,26 +231,16 @@ module.exports = {
       src: '单选.svg',
       css: 'check'
     },
-    {
-      src: '进入箭头.svg',
-      css: 'arrow'
-    },
-    {
-      src: 'arrow-left.svg',
-      css: 'arrow-left'
-    },
     {
       src: '搜索.svg',
       css: 'search'
     },
     {
-      src: '成功.svg',
+      src: '购物车3.svg',
-      css: 'success'
+      css: 'cart-o'
-    },
+    }
-    {
+  ],
-      src: '失败.svg',
+  filled: [
-      css: 'fail'
-    },
     {
       src: '加购.svg',
       css: 'add'
@@ -249,6 +269,10 @@ module.exports = {
       src: '喜欢2.svg',
       css: 'like'
     },
+    {
+      src: 'star.svg',
+      css: 'star'
+    },
     {
       src: '拍照.svg',
       css: 'photograph'
@@ -377,21 +401,9 @@ module.exports = {
       src: '热卖.svg',
       css: 'hot-sale'
     },
-    {
-      src: '购物车3.svg',
-      css: 'cart-o'
-    },
     {
       src: 'question2.svg',
       css: 'question2'
-    },
-    {
-      src: 'star.svg',
-      css: 'star'
-    },
-    {
-      src: 'star-o.svg',
-      css: 'star-o'
     }
   ]
 };

packages/icon/config/template.tpl

@@ -14,6 +14,22 @@
   font-size: inherit;
   text-rendering: auto;
 
+  &--image {
+    width: 1em;
+    height: 1em;
+
+    img {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      max-width: 100%;
+      max-height: 100%;
+      position: absolute;
+    }
+  }
+
   &::before {
     display: inline-block;
   }

packages/icon/demo/index.vue

@@ -1,14 +1,46 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('title')">
+    <demo-block :title="$t('basicUsage')">
-      <van-col
+      <van-col span="8">
-        v-for="icon in icons"
+        <van-icon name="close" />
-        :key="icon"
-        span="8"
-      >
-        <van-icon :name="icon" />
-        <span>{{ icon }}</span>
       </van-col>
+      <van-col span="8">
+        <van-icon name="//b.yzcdn.cn/vant/icon-demo-1126.png" />
+      </van-col>
+    </demo-block>
+
+    <demo-block :title="$t('info')">
+      <van-col span="8">
+        <van-icon
+          name="chat"
+          info="9"
+        />
+      </van-col>
+      <van-col span="8">
+        <van-icon
+          name="chat"
+          info="99+"
+        />
+      </van-col>
+    </demo-block>
+
+    <demo-block :title="$t('title')">
+      <van-tabs v-model="tab">
+        <van-tab title="基础图标" />
+        <van-tab title="线框风格" />
+        <van-tab title="实底风格" />
+      </van-tabs>
+      <div class="demo-icon-list">
+        <van-col
+          v-for="icon in list"
+          :key="icon"
+          span="8"
+          class="demo-col-with-text"
+        >
+          <van-icon :name="icon" />
+          <span>{{ icon }}</span>
+        </van-col>
+      </div>
     </demo-block>
   </demo-section>
 </template>
@@ -19,16 +51,28 @@ import icons from '../../../packages/icon/config';
 export default {
   i18n: {
     'zh-CN': {
-      title: '图标列表'
+      title: '图标列表',
+      info: '显示徽标',
+      basic: '基础图标'
     },
     'en-US': {
-      title: 'Icon List'
+      title: 'Icon List',
+      info: 'Show Info',
+      basic: 'Basic Icon'
     }
   },
 
   data() {
-    this.icons = icons.glyphs.map(icon => icon.css);
+    return {
-    return {};
+      tab: 0
+    };
+  },
+
+  computed: {
+    list() {
+      const key = ['basic', 'outline', 'filled'][this.tab];
+      return icons[key].map(icon => icon.css);
+    }
   }
 };
 </script>
@@ -37,22 +81,32 @@ export default {
 .demo-icon {
   font-size: 0;
 
+  &-list {
+    padding-top: 10px;
+    box-sizing: border-box;
+    min-height: calc(100vh - 65px);
+  }
+
   .van-col {
-    text-align: center;
-    height: 100px;
     float: none;
+    text-align: center;
+    height: 50px;
     display: inline-block;
     vertical-align: middle;
   }
 
+  .demo-col-with-text {
+    height: 100px;
+  }
+
   .van-icon {
-    display: block;
     font-size: 32px;
     margin: 15px 0;
-    color: rgba(69, 90, 100, .8);
+    color: rgba(69, 90, 100, 0.8);
   }
 
   span {
+    display: block;
     font-size: 14px;
   }
 }

packages/icon/en-US.md

@@ -10,10 +10,19 @@ Vue.use(Icon);
 ### Usage
 
 #### Basic Usage
-View all usable icons on the right.
+
+Use `name` prop to set icon name or icon URL
 
 ```html
-<van-icon name="success" />
+<van-icon name="close" />
+<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
+```
+
+#### Show Info
+
+```html
+<van-icon name="chat" info="9" />
+<van-icon name="chat" info="99+" />
 ```
 
 #### Use local font file
@@ -27,28 +36,28 @@ import 'vant/lib/icon/local.css';
 
 ```css
 @font-face {
-  font-family: 'custom-iconfont';
+  font-family: 'my-icon';
-  src: url('./iconfont.ttf') format('truetype');
+  src: url('./my-icon.ttf') format('truetype');
 }
 
-.van-icon {
+.my-icon {
-  font-family: 'vant-icon', 'custom-iconfont' !important;
+  font-family: 'my-icon';
 }
 
-.van-icon-extra:before {
+.my-icon-extra::before {
   content: '\e626';
 }
 ```
 
 ```html
-<van-icon name="extra" />
+<van-icon class-prefix="my-icon" name="extra" />
 ```
 
 ### API
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
-| name | Icon name | `String` | `''` |
+| name | Icon name or URL | `String` | `''` |
 | info | Info message | `String | Number` | `''` |
 | color | Icon color | `String` | `inherit` |
 | size | Icon size | `String` | `inherit` |

packages/icon/index.less

@@ -4,7 +4,7 @@
   font-style: normal;
   font-weight: normal;
   font-family: 'vant-icon';
-  src: url('https://img.yzcdn.cn/vant/vant-icon-1ef3b9.ttf') format('truetype');
+  src: url('https://img.yzcdn.cn/vant/vant-icon-7a2fab.ttf') format('truetype');
 }
 
 .van-icon {
@@ -14,6 +14,22 @@
   font-size: inherit;
   text-rendering: auto;
 
+  &--image {
+    width: 1em;
+    height: 1em;
+
+    img {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      max-width: 100%;
+      max-height: 100%;
+      position: absolute;
+    }
+  }
+
   &::before {
     display: inline-block;
   }
@@ -43,370 +59,402 @@
   content: "\F005";
 }
 
-.van-icon-arrow-left::before {
+.van-icon-arrow-down::before {
   content: "\F006";
 }
 
-.van-icon-arrow::before {
+.van-icon-arrow-left::before {
   content: "\F007";
 }
 
-.van-icon-balance-pay::before {
+.van-icon-arrow-up::before {
   content: "\F008";
 }
 
-.van-icon-browsing-history::before {
+.van-icon-arrow::before {
   content: "\F009";
 }
 
-.van-icon-card::before {
+.van-icon-balance-pay::before {
   content: "\F00A";
 }
 
-.van-icon-cart-o::before {
+.van-icon-browsing-history::before {
   content: "\F00B";
 }
 
-.van-icon-cart::before {
+.van-icon-card::before {
   content: "\F00C";
 }
 
-.van-icon-cash-back-record::before {
+.van-icon-cart-o::before {
   content: "\F00D";
 }
 
-.van-icon-cash-on-deliver::before {
+.van-icon-cart::before {
   content: "\F00E";
 }
 
-.van-icon-certificate::before {
+.van-icon-cash-back-record::before {
   content: "\F00F";
 }
 
-.van-icon-chat::before {
+.van-icon-cash-on-deliver::before {
   content: "\F010";
 }
 
-.van-icon-check::before {
+.van-icon-certificate::before {
   content: "\F011";
 }
 
-.van-icon-checked::before {
+.van-icon-chat::before {
   content: "\F012";
 }
 
-.van-icon-clear::before {
+.van-icon-check::before {
   content: "\F013";
 }
 
-.van-icon-clock::before {
+.van-icon-checked::before {
   content: "\F014";
 }
 
-.van-icon-close::before {
+.van-icon-clear::before {
   content: "\F015";
 }
 
-.van-icon-completed::before {
+.van-icon-clock::before {
   content: "\F016";
 }
 
-.van-icon-contact::before {
+.van-icon-close::before {
   content: "\F017";
 }
 
-.van-icon-coupon::before {
+.van-icon-completed::before {
   content: "\F018";
 }
 
-.van-icon-credit-pay::before {
+.van-icon-contact::before {
   content: "\F019";
 }
 
-.van-icon-debit-pay::before {
+.van-icon-coupon::before {
   content: "\F01A";
 }
 
-.van-icon-delete::before {
+.van-icon-credit-pay::before {
   content: "\F01B";
 }
 
-.van-icon-description::before {
+.van-icon-debit-pay::before {
   content: "\F01C";
 }
 
-.van-icon-discount::before {
+.van-icon-delete::before {
   content: "\F01D";
 }
 
-.van-icon-ecard-pay::before {
+.van-icon-description::before {
   content: "\F01E";
 }
 
-.van-icon-edit-data::before {
+.van-icon-discount::before {
   content: "\F01F";
 }
 
-.van-icon-edit::before {
+.van-icon-ecard-pay::before {
   content: "\F020";
 }
 
-.van-icon-exchange-record::before {
+.van-icon-edit-data::before {
   content: "\F021";
 }
 
-.van-icon-exchange::before {
+.van-icon-edit::before {
   content: "\F022";
 }
 
-.van-icon-fail::before {
+.van-icon-exchange-record::before {
   content: "\F023";
 }
 
-.van-icon-free-postage::before {
+.van-icon-exchange::before {
   content: "\F024";
 }
 
-.van-icon-gift-card-pay::before {
+.van-icon-fail::before {
   content: "\F025";
 }
 
-.van-icon-gift-card::before {
+.van-icon-free-postage::before {
   content: "\F026";
 }
 
-.van-icon-gift::before {
+.van-icon-gift-card-pay::before {
   content: "\F027";
 }
 
-.van-icon-gold-coin::before {
+.van-icon-gift-card::before {
   content: "\F028";
 }
 
-.van-icon-goods-collect::before {
+.van-icon-gift::before {
   content: "\F029";
 }
 
-.van-icon-home::before {
+.van-icon-gold-coin::before {
   content: "\F02A";
 }
 
-.van-icon-hot-sale::before {
+.van-icon-goods-collect::before {
   content: "\F02B";
 }
 
-.van-icon-hot::before {
+.van-icon-home::before {
   content: "\F02C";
 }
 
-.van-icon-idcard::before {
+.van-icon-hot-sale::before {
   content: "\F02D";
 }
 
-.van-icon-info-o::before {
+.van-icon-hot::before {
   content: "\F02E";
 }
 
-.van-icon-like-o::before {
+.van-icon-idcard::before {
   content: "\F02F";
 }
 
-.van-icon-like::before {
+.van-icon-info-o::before {
   content: "\F030";
 }
 
-.van-icon-location::before {
+.van-icon-like-o::before {
   content: "\F031";
 }
 
-.van-icon-logistics::before {
+.van-icon-like::before {
   content: "\F032";
 }
 
-.van-icon-more-o::before {
+.van-icon-location::before {
   content: "\F033";
 }
 
-.van-icon-more::before {
+.van-icon-logistics::before {
   content: "\F034";
 }
 
-.van-icon-new-arrival::before {
+.van-icon-more-o::before {
   content: "\F035";
 }
 
-.van-icon-new::before {
+.van-icon-more::before {
   content: "\F036";
 }
 
-.van-icon-other-pay::before {
+.van-icon-new-arrival::before {
   content: "\F037";
 }
 
-.van-icon-passed::before {
+.van-icon-new::before {
   content: "\F038";
 }
 
-.van-icon-password-not-view::before {
+.van-icon-other-pay::before {
   content: "\F039";
 }
 
-.van-icon-password-view::before {
+.van-icon-passed::before {
   content: "\F03A";
 }
 
-.van-icon-pause::before {
+.van-icon-password-not-view::before {
   content: "\F03B";
 }
 
-.van-icon-peer-pay::before {
+.van-icon-password-view::before {
   content: "\F03C";
 }
 
-.van-icon-pending-deliver::before {
+.van-icon-pause::before {
   content: "\F03D";
 }
 
-.van-icon-pending-evaluate::before {
+.van-icon-peer-pay::before {
   content: "\F03E";
 }
 
-.van-icon-pending-orders::before {
+.van-icon-pending-deliver::before {
   content: "\F03F";
 }
 
-.van-icon-pending-payment::before {
+.van-icon-pending-evaluate::before {
   content: "\F040";
 }
 
-.van-icon-phone::before {
+.van-icon-pending-orders::before {
   content: "\F041";
 }
 
-.van-icon-photo::before {
+.van-icon-pending-payment::before {
   content: "\F042";
 }
 
-.van-icon-photograph::before {
+.van-icon-phone::before {
   content: "\F043";
 }
 
-.van-icon-play::before {
+.van-icon-photo::before {
   content: "\F044";
 }
 
-.van-icon-point-gift::before {
+.van-icon-photograph::before {
   content: "\F045";
 }
 
-.van-icon-points-mall::before {
+.van-icon-play::before {
   content: "\F046";
 }
 
-.van-icon-points::before {
+.van-icon-point-gift::before {
   content: "\F047";
 }
 
-.van-icon-qr-invalid::before {
+.van-icon-points-mall::before {
   content: "\F048";
 }
 
-.van-icon-qr::before {
+.van-icon-points::before {
   content: "\F049";
 }
 
-.van-icon-question::before {
+.van-icon-qr-invalid::before {
   content: "\F04A";
 }
 
-.van-icon-question2::before {
+.van-icon-qr::before {
   content: "\F04B";
 }
 
-.van-icon-receive-gift::before {
+.van-icon-question::before {
   content: "\F04C";
 }
 
-.van-icon-records::before {
+.van-icon-question2::before {
   content: "\F04D";
 }
 
-.van-icon-search::before {
+.van-icon-receive-gift::before {
   content: "\F04E";
 }
 
-.van-icon-send-gift::before {
+.van-icon-records::before {
   content: "\F04F";
 }
 
-.van-icon-setting::before {
+.van-icon-search::before {
   content: "\F050";
 }
 
-.van-icon-share::before {
+.van-icon-send-gift::before {
   content: "\F051";
 }
 
-.van-icon-shop-collect::before {
+.van-icon-setting::before {
   content: "\F052";
 }
 
-.van-icon-shop::before {
+.van-icon-share::before {
   content: "\F053";
 }
 
-.van-icon-shopping-cart::before {
+.van-icon-shop-collect::before {
   content: "\F054";
 }
 
-.van-icon-sign::before {
+.van-icon-shop::before {
   content: "\F055";
 }
 
-.van-icon-star-o::before {
+.van-icon-shopping-cart::before {
   content: "\F056";
 }
 
-.van-icon-star::before {
+.van-icon-sign::before {
   content: "\F057";
 }
 
-.van-icon-stop::before {
+.van-icon-star-o::before {
   content: "\F058";
 }
 
-.van-icon-success::before {
+.van-icon-star::before {
   content: "\F059";
 }
 
-.van-icon-tosend::before {
+.van-icon-stop::before {
   content: "\F05A";
 }
 
-.van-icon-underway::before {
+.van-icon-success::before {
   content: "\F05B";
 }
 
-.van-icon-upgrade::before {
+.van-icon-tosend::before {
   content: "\F05C";
 }
 
-.van-icon-value-card::before {
+.van-icon-underway::before {
   content: "\F05D";
 }
 
-.van-icon-wap-home::before {
+.van-icon-upgrade::before {
   content: "\F05E";
 }
 
-.van-icon-wap-nav::before {
+.van-icon-value-card::before {
   content: "\F05F";
 }
 
-.van-icon-warn::before {
+.van-icon-wap-home::before {
   content: "\F060";
 }
 
-.van-icon-wechat::before {
+.van-icon-wap-nav::before {
   content: "\F061";
 }
+
+.van-icon-warn::before {
+  content: "\F062";
+}
+
+.van-icon-wechat::before {
+  content: "\F063";
+}
+
+.van-icon-圆角-上箭头::before {
+  content: "\F064";
+}
+
+.van-icon-圆角-下箭头::before {
+  content: "\F065";
+}
+
+.van-icon-圆角-右箭头::before {
+  content: "\F066";
+}
+
+.van-icon-圆角-左箭头::before {
+  content: "\F067";
+}
+
+.van-icon-失败::before {
+  content: "\F068";
+}
+
+.van-icon-成功::before {
+  content: "\F069";
+}

packages/icon/index.vue

@@ -1,10 +1,14 @@
 <template>
   <i
     v-on="$listeners"
-    :class="[classPrefix, `${classPrefix}-${name}`]"
+    :class="[classPrefix, isSrc ? 'van-icon--image' : `${classPrefix}-${name}`]"
     :style="style"
   >
     <slot />
+    <img
+      v-if="isSrc"
+      :src="name"
+    >
     <van-info :info="info" />
   </i>
 </template>
@@ -12,6 +16,7 @@
 <script>
 import Info from '../info';
 import create from '../utils/create-basic';
+import isSrc from '../utils/validate/src';
 
 export default create({
   name: 'icon',
@@ -22,9 +27,9 @@ export default create({
 
   props: {
     name: String,
-    info: [String, Number],
-    color: String,
     size: String,
+    color: String,
+    info: [String, Number],
     classPrefix: {
       type: String,
       default: 'van-icon'
@@ -37,6 +42,10 @@ export default create({
         color: this.color,
         fontSize: this.size
       };
+    },
+
+    isSrc() {
+      return isSrc(this.name);
     }
   }
 });

packages/icon/local.less

@@ -2,5 +2,5 @@
   font-style: normal;
   font-weight: normal;
   font-family: 'vant-icon';
-  src: url('./vant-icon-1ef3b9.ttf') format('truetype');
+  src: url('./vant-icon-7a2fab.ttf') format('truetype');
 }

packages/icon/test/__snapshots__/demo.spec.js.snap

@@ -1,400 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-close" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>close</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-upgrade" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>upgrade</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-add-o" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>add-o</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-passed" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>passed</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>chat</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-question" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>question</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-clock" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>clock</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-gold-coin" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>gold-coin</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-play" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>play</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-pause" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>pause</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-stop" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>stop</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>more-o</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-info-o" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>info-o</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-share" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>share</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-aim" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>aim</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-like-o" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>like-o</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-logistics" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>logistics</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-edit" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>edit</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-exchange" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>exchange</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-location" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>location</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-cart" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>cart</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-shop" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>shop</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-gift" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>gift</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-contact" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>contact</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-wap-home" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>wap-home</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-points" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>points</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-discount" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>discount</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-point-gift" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>point-gift</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-after-sale" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>after-sale</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-edit-data" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>edit-data</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-delete" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>delete</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>records</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-completed" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>completed</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-certificate" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>certificate</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-tosend" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>tosend</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-sign" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>sign</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-photo" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>photo</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-idcard" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>idcard</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-home" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>home</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-free-postage" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>free-postage</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-cash-back-record" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>cash-back-record</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-points-mall" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>points-mall</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-exchange-record" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>exchange-record</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-pending-payment" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>pending-payment</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-pending-orders" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>pending-orders</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-pending-deliver" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>pending-deliver</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-pending-evaluate" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>pending-evaluate</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-password-view" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>password-view</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-password-not-view" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>password-not-view</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>check</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-arrow" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>arrow</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-arrow-left" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>arrow-left</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>search</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>success</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-fail" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>fail</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-add" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>add</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>checked</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-warn" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>warn</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-clear" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>clear</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-underway" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>underway</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-more" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>more</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-like" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>like</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-photograph" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>photograph</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-qr-invalid" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>qr-invalid</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-qr" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>qr</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-add2" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>add2</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-wechat" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>wechat</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-alipay" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>alipay</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-wap-nav" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>wap-nav</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-ecard-pay" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>ecard-pay</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-balance-pay" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>balance-pay</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-peer-pay" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>peer-pay</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-credit-pay" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>credit-pay</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-debit-pay" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>debit-pay</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-other-pay" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>other-pay</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-shopping-cart" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>shopping-cart</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-browsing-history" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>browsing-history</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-goods-collect" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>goods-collect</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-shop-collect" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>shop-collect</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-receive-gift" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>receive-gift</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-send-gift" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>send-gift</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-setting" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>setting</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-coupon" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>coupon</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-gift-card-pay" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>gift-card-pay</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-cash-on-deliver" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>cash-on-deliver</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-phone" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>phone</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-description" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>description</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-card" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>card</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-value-card" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>value-card</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-gift-card" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>gift-card</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-hot" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>hot</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-new" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>new</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-new-arrival" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>new-arrival</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-hot-sale" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>hot-sale</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-cart-o" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>cart-o</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-question2" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>question2</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-star" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>star</span></div>
-    <div class="van-col van-col--8">
-      <i class="van-icon van-icon-star-o" style="color:undefined;font-size:undefined;">
-        <!---->
-      </i> <span>star-o</span></div>
-  </div>
-</div>
-`;

packages/icon/test/demo.spec.js

@@ -1,4 +0,0 @@
-import Demo from '../demo';
-import demoTest from '../../../test/demo-test';
-
-demoTest(Demo);

packages/icon/zh-CN.md

@@ -11,10 +11,18 @@ Vue.use(Icon);
 
 #### 基础用法
 
-设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
+`Icon`的`name`属性支持传入图标名称或图片链接
 
 ```html
-<van-icon name="success" />
+<van-icon name="close" />
+<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
+```
+
+#### 显示徽标
+
+```html
+<van-icon name="chat" info="9" />
+<van-icon name="chat" info="99+" />
 ```
 
 #### 使用本地字体文件
@@ -31,28 +39,28 @@ import 'vant/lib/icon/local.css';
 
 ```css
 @font-face {
-  font-family: 'custom-iconfont';
+  font-family: 'my-icon';
-  src: url('./iconfont.ttf') format('truetype');
+  src: url('./my-icon.ttf') format('truetype');
 }
 
-.van-icon {
+.my-icon {
-  font-family: 'vant-icon', 'custom-iconfont' !important;
+  font-family: 'my-icon';
 }
 
-.van-icon-extra:before {
+.my-icon-extra::before {
   content: '\e626';
 }
 ```
 
 ```html
-<van-icon name="extra" />
+<van-icon class-prefix="my-icon" name="extra" />
 ```
 
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| name | 图标名称 | `String` | - | - |
+| name | 图标名称或图片链接 | `String` | - | - |
 | info | 图标右上角文字提示 | `String | Number` | - | - |
 | color | 图标颜色 | `String` | `inherit` | 1.1.3 |
 | size | 图标大小，如 `20px` `2em` | `String` | `inherit` | 1.1.15 |

packages/image-preview/index.js

@@ -20,7 +20,7 @@ const initInstance = () => {
   document.body.appendChild(instance.$el);
 };
 
-const ImagePreview = (images, startPosition) => {
+const ImagePreview = (images, startPosition = 0) => {
   /* istanbul ignore if */
   if (isServer) {
     return;

packages/nav-bar/index.less

@@ -14,7 +14,8 @@
   }
 
   &__arrow {
-    transform: rotate(180deg);
+    min-width: 1em;
+    font-size: 16px;
 
     + .van-nav-bar__text {
       margin-left: -20px;

packages/nav-bar/index.vue

@@ -11,7 +11,7 @@
         <icon
           v-if="leftArrow"
           :class="b('arrow')"
-          name="arrow"
+          name="arrow-left"
         />
         <span
           v-if="leftText"

packages/nav-bar/test/__snapshots__/demo.spec.js.snap

@@ -5,7 +5,8 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-nav-bar van-hairline--bottom" style="z-index:1;">
       <div class="van-nav-bar__left">
-        <i class="van-icon van-icon-arrow van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
+        <i class="van-icon van-icon-arrow-left van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
+          <!---->
           <!---->
         </i> <span class="van-nav-bar__text">返回</span></div>
       <div class="van-ellipsis van-nav-bar__title">标题</div>
@@ -15,13 +16,15 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-nav-bar van-hairline--bottom" style="z-index:1;">
       <div class="van-nav-bar__left">
-        <i class="van-icon van-icon-arrow van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
+        <i class="van-icon van-icon-arrow-left van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
+          <!---->
           <!---->
         </i> <span class="van-nav-bar__text">返回</span></div>
       <div class="van-ellipsis van-nav-bar__title">标题</div>
       <div class="van-nav-bar__right">
         <i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i>
       </div>
     </div>

packages/notice-bar/test/__snapshots__/demo.spec.js.snap

@@ -30,6 +30,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <i class="van-icon van-icon-close van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
     </div>
     <div class="van-notice-bar van-notice-bar--withicon" style="color:undefined;background:undefined;">
@@ -39,6 +40,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <i class="van-icon van-icon-arrow van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
     </div>
   </div>

packages/panel/zh-CN.md

@@ -38,7 +38,7 @@ Vue.use(Panel);
 | title | 标题 | `String` | - | - |
 | desc | 描述 | `String` | - | - |
 | status | 状态 | `String` | - | - |
-| icon | 标题左侧图标，可选值见 Icon 组件 | `String` | - | 1.3.8 |
+| icon | 标题左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.3.8 |
 
 ### Slot
 

packages/radio/test/__snapshots__/demo.spec.js.snap

@@ -4,18 +4,18 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="demo-radio-group van-radio-group">
-      <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
+      <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
-      <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
+      <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
     </div>
   </div>
   <div>
     <div class="demo-radio-group van-radio-group">
-      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="1" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
+      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="1" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
-      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="2" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
+      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="2" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
     </div>
   </div>
   <div>
-    <div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">
+    <div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label">
       单选框
     </span></div>
   </div>
@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
             <!---->
           </div>
           <div class="van-cell__value">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span>
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span>
               <!---->
             </div>
           </div>
@@ -40,7 +40,7 @@ exports[`renders demo correctly 1`] = `
             <!---->
           </div>
           <div class="van-cell__value">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span>
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span>
               <!---->
             </div>
           </div>

packages/rate/demo/index.vue

@@ -4,9 +4,17 @@
       <van-rate v-model="value1" />
     </demo-block>
 
-    <demo-block :title="$t('customColor')">
+    <demo-block :title="$t('customIcon')">
       <van-rate
         v-model="value2"
+        icon="like"
+        void-icon="like-o"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('customStyle')">
+      <van-rate
+        v-model="value3"
         :size="25"
         :count="6"
         color="#2ba"
@@ -16,7 +24,7 @@
 
     <demo-block :title="$t('disabled')">
       <van-rate
-        v-model="value3"
+        v-model="value4"
         disabled
       />
     </demo-block>
@@ -28,19 +36,22 @@ export default {
   i18n: {
     'zh-CN': {
       disabled: '禁用状态',
-      customColor: '自定义颜色'
+      customIcon: '自定义图标',
+      customStyle: '自定义样式'
     },
     'en-US': {
       disabled: 'Disabled',
-      customColor: 'Custom Color'
+      customIcon: 'Custom Icon',
+      customStyle: 'Custom Style'
     }
   },
 
   data() {
     return {
       value1: 3,
-      value2: 4,
+      value2: 3,
-      value3: 2
+      value3: 4,
+      value4: 2
     };
   }
 };

packages/rate/en-US.md

@@ -25,7 +25,17 @@ export default {
 }
 ```
 
-#### Custom Color
+#### Custom Icon
+
+```html
+<van-rate
+  v-model="value"
+  icon="like"
+  void-icon="like-o"
+/>
+```
+
+#### Custom Style
 
 ```html
 <van-rate
@@ -50,8 +60,10 @@ export default {
 | v-model | Current rate | `Number` | - |
 | count | Count | `Number` | `5` |
 | size | Icon size (px) | `Number` | `20` |
-| color | Selected color | `String` | `#ffd21e`  |
+| color | Selected color | `String` | `#ffd21e` |
 | void-color | Void color | `String` | `#c7c7c7` |
+| icon | Selected icon | `String` | `star` |
+| void-icon | Void icon | `String` | `star-o` |
 | readonly | Whether to be readonly | `Boolean` | `false` |
 | disabled | Whether to disable rate | `Boolean` | `false` |
 | disabled-color | Disabled color | `String` | `#bdbdbd` | 

packages/rate/index.vue

@@ -9,7 +9,7 @@
       :class="b('item')"
       :size="size + 'px'"
       :data-index="index"
-      :name="full ? 'star' : 'star-o'"
+      :name="full ? icon : voidIcon"
       :color="disabled ? disabledColor : full ? color : voidColor"
       @click="onSelect(index)"
     />
@@ -29,6 +29,14 @@ export default create({
       type: Number,
       default: 20
     },
+    icon: {
+      type: String,
+      default: 'star'
+    },
+    voidIcon: {
+      type: String,
+      default: 'star-o'
+    },
     color: {
       type: String,
       default: '#ffd21e'

packages/rate/test/__snapshots__/demo.spec.js.snap

@@ -6,18 +6,47 @@ exports[`renders demo correctly 1`] = `
     <div class="van-rate">
       <i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
         <!---->
+        <!---->
       </i>
       <i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
         <!---->
+        <!---->
       </i>
       <i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
         <!---->
+        <!---->
       </i>
       <i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
         <!---->
+        <!---->
       </i>
       <i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
         <!---->
+        <!---->
+      </i>
+    </div>
+  </div>
+  <div>
+    <div class="van-rate">
+      <i data-index="0" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
+        <!---->
+        <!---->
+      </i>
+      <i data-index="1" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
+        <!---->
+        <!---->
+      </i>
+      <i data-index="2" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
+        <!---->
+        <!---->
+      </i>
+      <i data-index="3" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
+        <!---->
+        <!---->
+      </i>
+      <i data-index="4" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
+        <!---->
+        <!---->
       </i>
     </div>
   </div>
@@ -25,21 +54,27 @@ exports[`renders demo correctly 1`] = `
     <div class="van-rate">
       <i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
         <!---->
+        <!---->
       </i>
       <i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
         <!---->
+        <!---->
       </i>
       <i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
         <!---->
+        <!---->
       </i>
       <i data-index="3" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
         <!---->
+        <!---->
       </i>
       <i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
         <!---->
+        <!---->
       </i>
       <i data-index="5" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
         <!---->
+        <!---->
       </i>
     </div>
   </div>
@@ -47,18 +82,23 @@ exports[`renders demo correctly 1`] = `
     <div class="van-rate">
       <i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
         <!---->
+        <!---->
       </i>
       <i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
         <!---->
+        <!---->
       </i>
       <i data-index="2" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
         <!---->
+        <!---->
       </i>
       <i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
         <!---->
+        <!---->
       </i>
       <i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
         <!---->
+        <!---->
       </i>
     </div>
   </div>

packages/rate/zh-CN.md

@@ -25,7 +25,17 @@ export default {
 }
 ```
 
-#### 自定义颜色
+#### 自定义图标
+
+```html
+<van-rate
+  v-model="value"
+  icon="like"
+  void-icon="like-o"
+/>
+```
+
+#### 自定义样式
 
 ```html
 <van-rate
@@ -50,8 +60,10 @@ export default {
 | v-model | 当前分值 | `Number` | - | - |
 | count | 图标总数 | `Number` | `5` | - |
 | size | 图标大小 (px) | `Number` | `20` | - |
-| color | 选中时的颜色 | `String` | `#ffd21e`  | - |
+| color | 选中时的颜色 | `String` | `#ffd21e` | - |
 | void-color | 未选中时的颜色 | `String` | `#c7c7c7` | - |
+| icon | 选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star` | 1.4.7 |
+| void-icon | 未选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star-o`  | 1.4.7 |
 | readonly | 是否为只读状态 | `Boolean` | `false` | 1.3.0 |
 | disabled | 是否禁用评分 | `Boolean` | `false` | - |
 | disabled-color | 禁用时的颜色 | `String` | `#bdbdbd` | - |

packages/search/test/__snapshots__/demo.spec.js.snap

@@ -7,6 +7,7 @@ exports[`renders demo correctly 1`] = `
       <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
         <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i>
         <!---->
         <div class="van-cell__value van-cell__value--alone">
@@ -29,6 +30,7 @@ exports[`renders demo correctly 1`] = `
         <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
           <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
           <!---->
           <div class="van-cell__value van-cell__value--alone">
@@ -53,6 +55,7 @@ exports[`renders demo correctly 1`] = `
       <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
         <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i>
         <!---->
         <div class="van-cell__value van-cell__value--alone">

packages/steps/test/__snapshots__/demo.spec.js.snap

@@ -18,6 +18,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-step__circle-container">
             <i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;">
               <!---->
+              <!---->
             </i>
           </div>
           <div class="van-step__line"></div>
@@ -46,6 +47,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-steps__icon">
           <i class="van-icon van-icon-logistics steps-success" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div>
         <div class="van-steps__message">
@@ -66,6 +68,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-step__circle-container">
             <i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;">
               <!---->
+              <!---->
             </i>
           </div>
           <div class="van-step__line"></div>
@@ -99,6 +102,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-step__circle-container">
             <i class="van-icon van-icon-checked" style="color:#f44;font-size:undefined;">
               <!---->
+              <!---->
             </i>
           </div>
           <div class="van-step__line"></div>

packages/style/animation.less

@@ -22,6 +22,30 @@
   }
 }
 
+@keyframes van-slide-left-enter {
+  from {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes van-slide-left-leave {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes van-slide-right-enter {
+  from {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes van-slide-right-leave {
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
 @keyframes van-fade-in {
   from {
     opacity: 0;
@@ -81,3 +105,23 @@
     animation: van-slide-down-leave .3s both ease;
   }
 }
+
+.van-slide-left {
+  &-enter-active {
+    animation: van-slide-left-enter .3s both ease;
+  }
+
+  &-leave-active {
+    animation: van-slide-left-leave .3s both ease;
+  }
+}
+
+.van-slide-right {
+  &-enter-active {
+    animation: van-slide-right-enter .3s both ease;
+  }
+
+  &-leave-active {
+    animation: van-slide-right-leave .3s both ease;
+  }
+}

packages/style/demo/index.vue

@@ -24,14 +24,24 @@
         title="Slide Down"
         @click="animate('van-slide-down')"
       />
-
+      <van-cell
-      <transition :name="transitionName">
+        is-link
-        <div
+        title="Slide Left"
-          v-show="show"
+        @click="animate('van-slide-left')"
-          class="demo-animate-block"
+      />
-        />
+      <van-cell
-      </transition>
+        is-link
+        title="Slide Right"
+        @click="animate('van-slide-right')"
+      />
     </demo-block>
+
+    <transition :name="transitionName">
+      <div
+        v-show="show"
+        class="demo-animate-block"
+      />
+    </transition>
   </demo-section>
 </template>
 

packages/style/en-US.md

@@ -50,4 +50,14 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
 <transition name="van-slide-down">
   <div v-show="visible">Slide Down</div>
 </transition>
+
+<!-- slide left -->
+<transition name="van-slide-left">
+  <div v-show="visible">Slide Left</div>
+</transition>
+
+<!-- slide right -->
+<transition name="van-slide-right">
+  <div v-show="visible">Slide Right</div>
+</transition>
 ```

packages/style/zh-CN.md

@@ -49,4 +49,14 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 <transition name="van-slide-down">
   <div v-show="visible">Slide Down</div>
 </transition>
+
+<!-- 左滑进入 -->
+<transition name="van-slide-left">
+  <div v-show="visible">Slide Left</div>
+</transition>
+
+<!-- 右滑进入 -->
+<transition name="van-slide-right">
+  <div v-show="visible">Slide Right</div>
+</transition>
 ```

packages/submit-bar/test/__snapshots__/demo.spec.js.snap

@@ -50,6 +50,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
             <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
               <!---->
+              <!---->
             </i>
           </div> <span class="van-checkbox__label">全选</span></div>
         <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div>

packages/tab/en-US.md

@@ -153,13 +153,13 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | v-model | Index of active tab | `String` `Number` | `0` |
 | color | Tab color | `String` | `#f44` |
 | type | Can be set to `line` `card` | `String` | `line` |
-| duration | Toggle tab's animation time | `Number` | `0.4` | - |
+| duration | Toggle tab's animation time | `Number` | `0.3` | - |
 | line-width | Width of tab line (px) | `Number` | Width of active tab |
 | swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - |
 | sticky | Whether to use sticky mode | `Boolean` | `false` |
 | offset-top | Offset top when use sticky mode | `Number` | `0` |
 | swipeable | Whether to switch tabs with swipe gestrue in the content | `Boolean` | `false` |
-| animated | Whether to change tabs with animation | `false` | - |
+| animated | Whether to change tabs with animation | `Boolean` | `false` |
 
 ### Tab API
 

packages/tab/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    :class="b('pane', { float: parent.animated })"
     v-show="parent.animated || isSelected"
+    :class="b('pane', { float: parent.animated })"
     :style="paneStyle"
   >
     <slot v-if="inited" />

packages/tab/test/__snapshots__/demo.spec.js.snap

@@ -191,6 +191,7 @@ exports[`renders demo correctly 1`] = `
               <div>
                 <i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
                   <!---->
+                  <!---->
                 </i>标签
               </div>
             </div>
@@ -201,6 +202,7 @@ exports[`renders demo correctly 1`] = `
               <div>
                 <i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
                   <!---->
+                  <!---->
                 </i>标签
               </div>
             </div>
@@ -217,7 +219,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="width:0px;transition-duration:0.4s;transform:translateX(0px);display:none;">
+        <div class="van-tabs__track" style="width:0px;transition-duration:0.3s;transform:translateX(0px);display:none;">
           <div class="van-tab__pane van-tab__pane--float">
             <!---->
             <!---->

packages/tab/zh-CN.md

@@ -157,13 +157,13 @@ export default {
 | v-model | 当前标签的索引 | `String` `Number` | `0` | 1.0.6 |
 | color | 标签颜色 | `String` | `#f44` | 1.2.0 |
 | type | 样式类型，可选值为`card` | `String` | `line` | - |
-| duration | 动画时间，单位秒 | `Number` | `0.4` | - |
+| duration | 动画时间，单位秒 | `Number` | `0.3` | - |
 | line-width | 底部条宽度，单位 px | `Number` | - | 1.1.1 |
 | swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | 1.0.0 |
 | sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
 | offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 |
 | swipe-threshold | 滚动阈值，标签数量超过多少个可滚动 | `Number` | `4` | - |
-| animated | 是否开启切换标签内容时的转场动画 | `false` | - | 1.4.5 |
+| animated | 是否开启切换标签内容时的转场动画 | `Boolean` | `false` | 1.4.5 |
 
 ### Tab API
 

packages/tabbar/test/__snapshots__/demo.spec.js.snap

@@ -8,6 +8,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-tabbar-item__icon">
           <i class="van-icon van-icon-shop" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
           <!---->
         </div>
@@ -17,6 +18,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-tabbar-item__icon van-tabbar-item__icon--dot">
           <i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
           <!---->
         </div>
@@ -28,6 +30,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-tabbar-item__icon">
           <i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
           <div class="van-info">
             5
@@ -41,6 +44,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-tabbar-item__icon">
           <i class="van-icon van-icon-gold-coin" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
           <div class="van-info">
             20
@@ -67,6 +71,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-tabbar-item__icon">
           <i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
           <!---->
         </div>
@@ -76,6 +81,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-tabbar-item__icon">
           <i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
           <!---->
         </div>

packages/tabbar/zh-CN.md

@@ -83,7 +83,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| icon | 图标名称 (可选值见 Icon 组件) | `String` | - | - |
+| icon | 图标名称或图片链接，可选值见 Icon 组件| `String` | - | - |
 | dot | 是否显示小红点 | `Boolean` | - | - |
 | info | 图标右上角提示信息 | `String | Number` | - | - |
 | url | 跳转链接 | `String` | - | - |

packages/tabs/index.less

@@ -3,6 +3,7 @@
 .van-tab {
   flex: 1;
   cursor: pointer;
+  min-width: 0; // hack for flex ellipsis
   padding: 0 5px;
   font-size: 14px;
   position: relative;
@@ -11,7 +12,7 @@
   text-align: center;
   box-sizing: border-box;
   background-color: @white;
-  min-width: 0; /* hack for flex ellipsis */
+  transition: color .3s;
 
   span {
     display: block;

packages/tabs/index.vue

@@ -72,6 +72,7 @@ export default create({
   props: {
     color: String,
     sticky: Boolean,
+    animated: Boolean,
     lineWidth: Number,
     swipeable: Boolean,
     active: {
@@ -84,7 +85,7 @@ export default create({
     },
     duration: {
       type: Number,
-      default: 0.4
+      default: 0.3
     },
     swipeThreshold: {
       type: Number,
@@ -93,8 +94,7 @@ export default create({
     offsetTop: {
       type: Number,
       default: 0
-    },
+    }
-    animated: Boolean
   },
 
   data() {

packages/toast/index.less

@@ -44,11 +44,11 @@
     }
 
     .van-loading {
-      margin: 10px 0 5px;
+      margin: 10px 0;
     }
 
     .van-toast__text {
-      padding-top: 10px;
+      padding-top: 5px;
     }
   }
 

packages/tree-select/test/__snapshots__/demo.spec.js.snap

@@ -20,6 +20,7 @@ exports[`renders demo correctly 1`] = `
           杭州
           <i class="van-icon van-icon-success van-tree-select__selected" style="color:undefined;font-size:undefined;">
             <!---->
+            <!---->
           </i>
         </div>
         <div class="van-ellipsis van-tree-select__item">

packages/uploader/test/__snapshots__/demo.spec.js.snap

@@ -7,6 +7,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-uploader">
         <i class="van-icon van-icon-photograph" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i>
         <input type="file" accept="image/*" class="van-uploader__input">
       </div>
@@ -17,6 +18,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-uploader">
         <i class="van-icon van-icon-photograph" style="color:undefined;font-size:undefined;">
           <!---->
+          <!---->
         </i>
         <input type="file" accept="image/gif, image/jpeg" multiple="multiple" class="van-uploader__input">
       </div>

packages/utils/test/index.spec.js

@@ -2,6 +2,7 @@ import deepClone from '../deep-clone';
 import { isAndroid, isDef, camelize, get } from '..';
 import { raf, cancel } from '../raf';
 import { later } from '../../../test/utils';
+import isSrc from '../validate/src';
 import isEmail from '../validate/email';
 import isMobile from '../validate/mobile';
 import isNumber from '../validate/number';
@@ -76,3 +77,13 @@ test('is-number', () => {
   expect(isNumber('abc')).toBeFalsy();
   expect(isNumber('1b2')).toBeFalsy();
 });
+
+test('is-src', () => {
+  expect(isSrc('http://img.cdn.com')).toBeTruthy();
+  expect(isSrc('https://img.cdn.com')).toBeTruthy();
+  expect(isSrc('//img.cdn.com')).toBeTruthy();
+  expect(isSrc('data:image/jpeg;base64,/9j/4AAQSkZ')).toBeTruthy();
+  expect(isSrc('img.cdn.com')).toBeFalsy();
+  expect(isSrc('name')).toBeFalsy();
+  expect(isSrc('')).toBeFalsy();
+});

packages/utils/validate/src.js

@@ -0,0 +1,6 @@
+/**
+ * Is image source
+ */
+export default function src(url) {
+  return /^(https?:)?\/\/|data:image/.test(url);
+}