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

example/components/demo-block/index.wxml

@@ -1,4 +1,4 @@
-<view class="custom-class demo-block {{ padding ? 'demo-block--padding' : '' }}">
+<view class="custom-class demo-block van-clearfix {{ padding ? 'demo-block--padding' : '' }}">
   <view wx:if="{{ title }}" class="demo-block__title">{{ title }}</view>
   <slot />
 </view>

example/components/demo-block/index.wxss

@@ -1,3 +1,5 @@
+@import '../../dist/common/index.wxss';
+
 .demo-block__title {
   margin: 0;
   font-weight: 400;

example/pages/icon/index.wxml

@@ -1,5 +1,31 @@
+<demo-block title="基础用法">
+  <van-col span="8" custom-class="col">
+    <van-icon size="32px" custom-class="icon" name="close" />
+  </van-col>
+
+  <van-col span="8" custom-class="col">
+    <van-icon size="32px" custom-class="icon" name="//b.yzcdn.cn/vant/icon-demo-1126.png" />
+  </van-col>
+</demo-block>
+
+<demo-block title="显示徽标">
+  <van-col span="8" custom-class="col">
+    <van-icon size="32px" custom-class="icon" name="chat" info="9" />
+  </van-col>
+
+  <van-col span="8" custom-class="col">
+    <van-icon size="32px" custom-class="icon" name="chat" info="99+" />
+  </van-col>
+</demo-block>
+
 <demo-block title="图标列表">
-  <van-col custom-class="col" span="8" wx:for="{{ icons }}" wx:for-item="icon" wx:key="index">
+  <van-col
+    wx:for="{{ icons }}"
+    wx:for-item="icon"
+    wx:key="index"
+    span="8"
+    custom-class="col-with-text"
+  >
     <van-icon custom-class="icon" name="{{ icon }}" size="32px" />
     <view class="text">{{ icon }}</view>
   </van-col>

example/pages/icon/index.wxss

@@ -1,11 +1,16 @@
-.col {
+.col,
+.col-with-text {
   text-align: center;
-  height: 100px;
+  height: 60px;
   float: none;
   display: inline-block;
   vertical-align: middle;
 }
 
+.col-with-text {
+  height: 100px;
+}
+
 .icon {
   display: block;
   margin: 15px 0;

packages/cell/README.md

@@ -128,7 +128,7 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| icon | 左侧图标，可选值见 Icon 组件 | `String` | - |
+| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - |
 | title | 左侧标题 | `String | Number` | - |
 | title-width | 标题宽度，须包含单位 | `String` | - |
 | value | 右侧内容 | `String | Number` | - |

packages/collapse/README.md

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

packages/common/utils.ts

@@ -11,8 +11,13 @@ function isNumber(value) {
   return /^\d+$/.test(value);
 }
 
+function isSrc(url) {
+  return /^(https?:)?\/\/|data:image/.test(url);
+}
+
 export {
   isObj,
   isDef,
+  isSrc,
   isNumber
 };

packages/field/README.md

@@ -156,8 +156,8 @@ Page({
 | error-message | 底部错误提示文案，为空时不展示 | `String` | `''` |
 | input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` |
 | autosize | 自适应内容高度，只对 textarea 有效 | `Boolean` | `false` |
-| icon | 输入框尾部图标 (可选值见 Icon 组件)  | `String` | - |
-| left-icon | 输入框左侧图标 (可选值见 Icon 组件)  | `String` | - |
+| icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - |
+| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - |
 | confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | `String` | `done` |
 | confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起，在 type='textarea' 时无效 | `Boolean` | `false` |
 | cursor-spacing | 输入框聚焦时底部与键盘的距离 | `Number` | `50` |

packages/icon/README.md

@@ -13,17 +13,25 @@
 
 #### 基础用法
 
-设置`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+" />
 ```
 
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| name | 图标名称 | `String` | - |
+| name | 图标名称或图片链接 | `String` | - |
 | info | 图标右上角文字提示 | `String | Number` | - |
 | color | 图标颜色 | `String` | `inherit` |
 | size | 图标大小，如 `20px`，`2em` | `String` | `inherit` |

packages/icon/index.less

@@ -14,21 +14,40 @@
   font-size: inherit;
   text-rendering: auto;
 
+  &--image {
+    width: 1em;
+    height: 1em;
+
+    image {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      max-width: 100%;
+      max-height: 100%;
+      position: absolute;
+    }
+  }
+
   &__info {
-    color: @white;
-    left: 100%;
-    top: -.5em;
-    font-size: .6em;
-    padding: 0 .25em;
-    text-align: center;
-    min-width: 1.4em;
-    line-height: 1.4;
     position: absolute;
-    border-radius: .6em;
-    box-sizing: border-box;
-    background-color: @red;
-    transform: translateX(-50%);
+    right: 0;
+    top: -8px;
+    color: @white;
+    font-size: 12px;
+    font-weight: 500;
     font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+    text-align: center;
+    box-sizing: border-box;
+    padding: 0 3px;
+    min-width: 16px;
+    line-height: 14px;
+    border: 1px solid @white;
+    border-radius: 16px;
+    background-color: @red;
+    transform: translateX(50%);
+    transform-origin: 100%;
   }
 
   &::before {

packages/icon/index.ts

@@ -1,3 +1,4 @@
+import { isSrc } from '../common/utils';
 import { VantComponent } from '../common/component';
 
 VantComponent({
@@ -13,6 +14,12 @@ VantComponent({
     }
   },
 
+  computed: {
+    isSrc() {
+      return isSrc(this.data.name);
+    }
+  },
+
   methods: {
     onClick() {
       this.$emit('click');

packages/icon/index.wxml

@@ -1,7 +1,16 @@
 <view
-  class="custom-class {{ classPrefix }} {{ classPrefix }}-{{ name }}"
+  class="custom-class {{ classPrefix }} {{ isSrc ? 'van-icon--image' : classPrefix + '-' + name }}"
   style="{{ color ? 'color: ' + color + ';' : '' }}{{ size ? 'font-size: ' + size + ';' : '' }}{{ customStyle }}"
   bind:tap="onClick"
 >
-  <view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
+  <view
+    wx:if="{{ info !== null }}"
+    class="van-icon__info"
+  >
+    {{ info }}
+  </view>
+  <image
+    wx-if="{{ isSrc }}"
+    src="{{ name }}"
+  />
 </view>

packages/rate/README.md

@@ -74,8 +74,8 @@ Page({
 | size | 图标大小 (px) | `Number` | `20` |
 | color | 选中时的颜色 | `String` | `#ffd21e` |
 | void-color | 未选中时的颜色 | `String` | `#c7c7c7` |
-| icon | 选中时的图标，可选值见 Icon 组件 | `String` | `star` |
-| void-icon | 未选中时的图标，可选值见 Icon 组件 | `String` | `star-o` |
+| icon | 选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star` |
+| void-icon | 未选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star-o` |
 | readonly | 是否为只读状态 | `Boolean` | `false` |
 | disabled | 是否禁用评分 | `Boolean` | `false` |
 | disabled-color | 禁用时的颜色 | `String` | `#bdbdbd` |

packages/tabbar/README.md

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