alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neverland
2018-11-26 20:27:30 +08:00
committed by GitHub
parent d337bd2e20
commit dc11970fa0
38 changed files with 249 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/icon/config/template.tpl
+16
View File
@@ -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
+36 -5
View File
@@ -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
+18 -9
View File
@@ -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
+16
View File
@@ -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
+12 -3
View File
@@ -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
-400
View File
@@ -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
-4
View File
@@ -1,4 +0,0 @@
import Demo from '../demo';
import demoTest from '../../../test/demo-test';
demoTest(Demo);
packages/icon/zh-CN.md
+17 -9
View File
@@ -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 |