[improvement] update basic icons (#2159)

This commit is contained in:
neverland 2018-11-27 16:20:30 +08:00 committed by GitHub
parent ae49bdc89d
commit 0c51c3c9e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 195 additions and 140 deletions

View File

@ -33,7 +33,8 @@ const prevTTFs = glob.sync(path.join(iconDir, '*.ttf'));
prevTTFs.forEach(ttf => fs.removeSync(ttf));
// rename svg
config.glyphs.forEach((icon, index) => {
const icons = [].concat(config.glyphs, config.basic);
icons.forEach((icon, index) => {
const src = path.join(svgDir, icon.src);
if (fs.existsSync(src)) {
fs.renameSync(src, path.join(svgDir, icon.css + '.svg'));

View File

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

View File

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

View File

@ -90,7 +90,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value"><span>内容</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon van-cell__right-icon--down" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-arrow-down van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>

View File

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

View File

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

Binary file not shown.

View File

@ -1,5 +1,31 @@
module.exports = {
name: 'vant-icon',
basic: [
{
src: 'success.svg',
css: 'success'
},
{
src: 'fail.svg',
css: 'fail'
},
{
src: 'arrow.svg',
css: 'arrow'
},
{
src: 'arrow-left.svg',
css: 'arrow-left'
},
{
src: 'arrow-up.svg',
css: 'arrow-up'
},
{
src: 'arrow-down.svg',
css: 'arrow-down'
}
],
glyphs: [
{
src: 'close.svg',
@ -201,26 +227,10 @@ module.exports = {
src: '单选.svg',
css: 'check'
},
{
src: '进入箭头.svg',
css: 'arrow'
},
{
src: 'arrow-left.svg',
css: 'arrow-left'
},
{
src: '搜索.svg',
css: 'search'
},
{
src: '成功.svg',
css: 'success'
},
{
src: '失败.svg',
css: 'fail'
},
{
src: '加购.svg',
css: 'add'

View File

@ -24,6 +24,18 @@
</van-col>
</demo-block>
<demo-block :title="$t('basic')">
<van-col
v-for="icon in basic"
:key="icon"
span="8"
class="demo-col-with-text"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
</van-col>
</demo-block>
<demo-block :title="$t('title')">
<van-col
v-for="icon in icons"
@ -45,15 +57,18 @@ export default {
i18n: {
'zh-CN': {
title: '图标列表',
info: '显示徽标'
info: '显示徽标',
basic: '基础图标'
},
'en-US': {
title: 'Icon List',
info: 'Show Info'
info: 'Show Info',
basic: 'Basic Icon'
}
},
data() {
this.basic = icons.basic.map(icon => icon.css);
this.icons = icons.glyphs.map(icon => icon.css);
return {};
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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