mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 06:31:45 +08:00
[improvement] update basic icons (#2159)
This commit is contained in:
parent
ae49bdc89d
commit
0c51c3c9e7
@ -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'));
|
||||
|
@ -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 {
|
||||
|
@ -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');
|
||||
|
@ -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>
|
||||
|
@ -149,8 +149,7 @@ export default {
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
display: block;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -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.
@ -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'
|
||||
|
@ -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 {};
|
||||
}
|
||||
|
@ -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";
|
||||
}
|
||||
|
@ -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');
|
||||
}
|
||||
|
Binary file not shown.
@ -14,7 +14,8 @@
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
transform: rotate(180deg);
|
||||
min-width: 1em;
|
||||
font-size: 16px;
|
||||
|
||||
+ .van-nav-bar__text {
|
||||
margin-left: -20px;
|
||||
|
@ -11,7 +11,7 @@
|
||||
<icon
|
||||
v-if="leftArrow"
|
||||
:class="b('arrow')"
|
||||
name="arrow"
|
||||
name="arrow-left"
|
||||
/>
|
||||
<span
|
||||
v-if="leftText"
|
||||
|
@ -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>
|
||||
|
@ -44,11 +44,11 @@
|
||||
}
|
||||
|
||||
.van-loading {
|
||||
margin: 10px 0 5px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.van-toast__text {
|
||||
padding-top: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user