[Doc] classify icons (#2161)

build/build-iconfont.js

@@ -33,7 +33,7 @@ const prevTTFs = glob.sync(path.join(iconDir, '*.ttf'));
 prevTTFs.forEach(ttf => fs.removeSync(ttf));
 
 // rename svg
-const icons = [].concat(config.glyphs, config.basic);
+const icons = [...config.basic, ...config.outline, ...config.filled];
 icons.forEach((icon, index) => {
   const src = path.join(svgDir, icon.src);
   if (fs.existsSync(src)) {
@@ -66,10 +66,7 @@ gulp.task('ttf', () => {
 
 gulp.task('default', ['ttf'], () => {
   // generate icon-local.css
-  fs.writeFileSync(
-    path.join(iconDir, 'local.less'),
-    local(config.name, ttf)
-  );
+  fs.writeFileSync(path.join(iconDir, 'local.less'), local(config.name, ttf));
 
   // remove svg
   fs.removeSync(svgDir);

packages/icon/config/index.js

@@ -26,7 +26,7 @@ module.exports = {
       css: 'arrow-down'
     }
   ],
-  glyphs: [
+  outline: [
     {
       src: 'close.svg',
       css: 'close'
@@ -91,6 +91,10 @@ module.exports = {
       src: '喜欢.svg',
       css: 'like-o'
     },
+    {
+      src: 'star-o.svg',
+      css: 'star-o'
+    },
     {
       src: '物流.svg',
       css: 'logistics'
@@ -231,6 +235,12 @@ module.exports = {
       src: '搜索.svg',
       css: 'search'
     },
+    {
+      src: '购物车3.svg',
+      css: 'cart-o'
+    }
+  ],
+  filled: [
     {
       src: '加购.svg',
       css: 'add'
@@ -259,6 +269,10 @@ module.exports = {
       src: '喜欢2.svg',
       css: 'like'
     },
+    {
+      src: 'star.svg',
+      css: 'star'
+    },
     {
       src: '拍照.svg',
       css: 'photograph'
@@ -387,21 +401,9 @@ module.exports = {
       src: '热卖.svg',
       css: 'hot-sale'
     },
-    {
-      src: '购物车3.svg',
-      css: 'cart-o'
-    },
     {
       src: 'question2.svg',
       css: 'question2'
-    },
-    {
-      src: 'star.svg',
-      css: 'star'
-    },
-    {
-      src: 'star-o.svg',
-      css: 'star-o'
     }
   ]
 };

packages/icon/demo/index.vue

@@ -24,28 +24,23 @@
       </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"
-        :key="icon"
-        span="8"
-        class="demo-col-with-text"
-      >
-        <van-icon :name="icon" />
-        <span>{{ icon }}</span>
-      </van-col>
+      <van-tabs v-model="tab">
+        <van-tab title="基础图标" />
+        <van-tab title="线框风格" />
+        <van-tab title="实底风格" />
+      </van-tabs>
+      <div class="demo-icon-list">
+        <van-col
+          v-for="icon in list"
+          :key="icon"
+          span="8"
+          class="demo-col-with-text"
+        >
+          <van-icon :name="icon" />
+          <span>{{ icon }}</span>
+        </van-col>
+      </div>
     </demo-block>
   </demo-section>
 </template>
@@ -68,9 +63,16 @@ export default {
   },
 
   data() {
-    this.basic = icons.basic.map(icon => icon.css);
-    this.icons = icons.glyphs.map(icon => icon.css);
-    return {};
+    return {
+      tab: 0
+    };
+  },
+
+  computed: {
+    list() {
+      const key = ['basic', 'outline', 'filled'][this.tab];
+      return icons[key].map(icon => icon.css);
+    }
   }
 };
 </script>
@@ -79,6 +81,12 @@ export default {
 .demo-icon {
   font-size: 0;
 
+  &-list {
+    padding-top: 10px;
+    box-sizing: border-box;
+    min-height: calc(100vh - 65px);
+  }
+
   .van-col {
     float: none;
     text-align: center;
@@ -94,7 +102,7 @@ export default {
   .van-icon {
     font-size: 32px;
     margin: 15px 0;
-    color: rgba(69, 90, 100, .8);
+    color: rgba(69, 90, 100, 0.8);
   }
 
   span {