[new feature] Icon: name can be URL (#2149)

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

@@ -44,6 +44,7 @@
   }
 
   &__left-icon {
+    height: 24px;
     min-width: 1em;
     font-size: 16px;
     line-height: 24px;

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">
@@ -89,6 +92,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 van-cell__right-icon--down" style="color:undefined;font-size:undefined;">
         <!---->
+        <!---->
       </i>
     </div>
   </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/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-list/test/__snapshots__/demo.spec.js.snap

@@ -11,6 +11,7 @@ exports[`renders demo correctly 1`] = `
       <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>
     <!---->

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

@@ -9,6 +9,7 @@ exports[`coupon cell 1`] = `
   <div class="van-cell__value"><span>使用优惠</span></div>
   <i class="van-icon van-icon-arrow van-cell__right-icon">
     <!---->
+    <!---->
   </i>
 </div>
 `;
@@ -22,6 +23,7 @@ exports[`coupon cell 2`] = `
   <div class="van-cell__value"><span>-￥1.00</span></div>
   <i class="van-icon van-icon-arrow van-cell__right-icon">
     <!---->
+    <!---->
   </i>
 </div>
 `;

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` | - | - |
-| left-icon | 输入框左侧图标，可选值见 Icon 组件 | `String` | - | 1.1.4 |
+| icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - |
+| 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/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,10 +1,35 @@
 <template>
   <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-col span="8">
+        <van-icon name="close" />
+      </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-col
         v-for="icon in icons"
         :key="icon"
         span="8"
+        class="demo-col-with-text"
       >
         <van-icon :name="icon" />
         <span>{{ icon }}</span>
@@ -19,10 +44,12 @@ import icons from '../../../packages/icon/config';
 export default {
   i18n: {
     'zh-CN': {
-      title: '图标列表'
+      title: '图标列表',
+      info: '显示徽标'
     },
     'en-US': {
-      title: 'Icon List'
+      title: 'Icon List',
+      info: 'Show Info'
     }
   },
 
@@ -38,21 +65,25 @@ export default {
   font-size: 0;
 
   .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);
   }
 
   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';
-  src: url('./iconfont.ttf') format('truetype');
+  font-family: 'my-icon';
+  src: url('./my-icon.ttf') format('truetype');
 }
 
-.van-icon {
-  font-family: 'vant-icon', 'custom-iconfont' !important;
+.my-icon {
+  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

@@ -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/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/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';
-  src: url('./iconfont.ttf') format('truetype');
+  font-family: 'my-icon';
+  src: url('./my-icon.ttf') format('truetype');
 }
 
-.van-icon {
-  font-family: 'vant-icon', 'custom-iconfont' !important;
+.my-icon {
+  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/nav-bar/test/__snapshots__/demo.spec.js.snap

@@ -7,6 +7,7 @@ exports[`renders demo correctly 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> <span class="van-nav-bar__text">返回</span></div>
       <div class="van-ellipsis van-nav-bar__title">标题</div>
       <div class="van-nav-bar__right"><span class="van-nav-bar__text">按钮</span></div>
@@ -17,11 +18,13 @@ exports[`renders demo correctly 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> <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="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="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>
   </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="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="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>
   </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/test/__snapshots__/demo.spec.js.snap

@@ -6,18 +6,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:#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>
@@ -25,18 +30,23 @@ exports[`renders demo correctly 1`] = `
     <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>
@@ -44,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>
@@ -66,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

@@ -62,8 +62,8 @@ export default {
 | size | 图标大小 (px) | `Number` | `20` | - |
 | color | 选中时的颜色 | `String` | `#ffd21e` | - |
 | void-color | 未选中时的颜色 | `String` | `#c7c7c7` | - |
-| icon | 选中时的图标，可选值见 Icon 组件 | `String` | `star` | 1.4.7 |
-| void-icon | 未选中时的图标，可选值见 Icon 组件 | `String` | `star-o`  | 1.4.7 |
+| 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/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/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>

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/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);
+}