[improvement] update basic icons (#2159)

build/build-iconfont.js

@@ -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'));

packages/cell/index.less

@@ -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 {

packages/cell/index.vue

@@ -42,8 +42,8 @@
     <slot name="right-icon">
       <icon
         v-if="isLink"
-        :class="b('right-icon', arrowDirection)"
+        :class="b('right-icon')"
-        name="arrow"
+        :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');

packages/cell/test/__snapshots__/demo.spec.js.snap

@@ -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>

packages/checkbox/demo/index.vue

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

packages/checkbox/index.less

@@ -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;

packages/icon/config/index.js

@@ -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'

packages/icon/demo/index.vue

@@ -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 {};
   }

packages/icon/index.less

@@ -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";
+}

packages/icon/local.less

@@ -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');
 }

packages/nav-bar/index.less

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

packages/nav-bar/index.vue

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

packages/nav-bar/test/__snapshots__/demo.spec.js.snap

@@ -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>

packages/toast/index.less

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