用户名
diff --git a/packages/field/test/__snapshots__/index.spec.js.snap b/packages/field/test/__snapshots__/index.spec.js.snap
index d1ce94da0..13eb10c6b 100644
--- a/packages/field/test/__snapshots__/index.spec.js.snap
+++ b/packages/field/test/__snapshots__/index.spec.js.snap
@@ -26,6 +26,7 @@ exports[`clearable 2`] = `
+
diff --git a/packages/field/zh-CN.md b/packages/field/zh-CN.md
index eaff064fb..e420a92e3 100644
--- a/packages/field/zh-CN.md
+++ b/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 有效,可传入对象,
如 { 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
diff --git a/packages/goods-action/test/__snapshots__/demo.spec.js.snap b/packages/goods-action/test/__snapshots__/demo.spec.js.snap
index 7f20b69ae..d7148ce89 100644
--- a/packages/goods-action/test/__snapshots__/demo.spec.js.snap
+++ b/packages/goods-action/test/__snapshots__/demo.spec.js.snap
@@ -7,10 +7,12 @@ exports[`renders demo correctly 1`] = `
+
客服
+
购物车
@@ -21,9 +23,11 @@ exports[`renders demo correctly 1`] = `
+
客服
+
5
@@ -31,6 +35,7 @@ exports[`renders demo correctly 1`] = `
+
店铺
diff --git a/packages/icon/config/template.tpl b/packages/icon/config/template.tpl
index d982efd0d..9dd3d47dd 100644
--- a/packages/icon/config/template.tpl
+++ b/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;
}
diff --git a/packages/icon/demo/index.vue b/packages/icon/demo/index.vue
index b79096328..806434550 100644
--- a/packages/icon/demo/index.vue
+++ b/packages/icon/demo/index.vue
@@ -1,10 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ icon }}
@@ -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;
}
}
diff --git a/packages/icon/en-US.md b/packages/icon/en-US.md
index 5c505654d..2d6287a24 100644
--- a/packages/icon/en-US.md
+++ b/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
-
+
+
+```
+
+#### Show Info
+
+```html
+
+
```
#### 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
-
+
```
### 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` |
diff --git a/packages/icon/index.less b/packages/icon/index.less
index 194b05009..05559c8b7 100644
--- a/packages/icon/index.less
+++ b/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;
}
diff --git a/packages/icon/index.vue b/packages/icon/index.vue
index 1b75337bc..ec7d314ce 100644
--- a/packages/icon/index.vue
+++ b/packages/icon/index.vue
@@ -1,10 +1,14 @@
+
@@ -12,6 +16,7 @@