[Build] extract build iconfont (#1242)

packages/icon/config/template-local.js

@@ -1,8 +1,8 @@
-module.exports = (fontName, hash) => {
+module.exports = (fontName, ttf) => {
   return `@font-face {
   font-style: normal;
   font-weight: normal;
   font-family: '${fontName}';
-  src: url('./${fontName}-${hash}.ttf') format('truetype');
+  src: url('../icon/${ttf}') format('truetype');
 }`;
 };

packages/icon/config/template.css

@@ -4,7 +4,7 @@
   font-style: normal;
   font-weight: normal;
   font-family: '<%= fontName %>';
-  src: url('https://img.yzcdn.cn/zanui/icon/<%= fontName %>.ttf') format('truetype');
+  src: url('https://img.yzcdn.cn/vant/<%= cssClass %>') format('truetype');
 }
 
 .van-icon {
@@ -36,7 +36,7 @@
   }
 }
 
-<% _.each(glyphs, function(glyph) { %>.van-<%= cssClass %>-<%= glyph.fileName %>:before {
+<% _.each(glyphs, function(glyph) { %>.van-icon-<%= glyph.fileName %>:before {
   content: "\<%= glyph.codePoint %>";
 }
 <% }); %>

packages/icon/demo/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-const icons = require('../../../packages/vant-css/scripts/icon-config');
+import icons from '../../../packages/icon/config';
 
 export default {
   i18n: {

packages/index.js

@@ -1,4 +1,4 @@
-// This file is auto gererated by build/bin/build-entry.js
+// This file is auto gererated by build/build-entry.js
 import Actionsheet from './actionsheet';
 import AddressEdit from './address-edit';
 import AddressList from './address-list';
@@ -68,7 +68,7 @@ import TreeSelect from './tree-select';
 import Uploader from './uploader';
 import Waterfall from './waterfall';
 
-const version = '1.1.6';
+const version = '1.1.7';
 const components = [
   Actionsheet,
   AddressEdit,

packages/vant-css/gulpfile.js

@@ -1,16 +1,7 @@
 const gulp = require('gulp');
 const postcss = require('gulp-postcss');
 const cssmin = require('gulp-clean-css');
-const iconfont = require('gulp-iconfont');
-const iconfontCss = require('gulp-iconfont-css');
 const fs = require('fs-extra');
-const config = require('./scripts/icon-config');
-const path = require('path');
-const shelljs = require('shelljs');
-const md5File = require('md5-file');
-const glob = require('glob');
-const iconLocalTemplate = require('./scripts/icon-local-template');
-const resolve = relativePath => path.resolve(__dirname, relativePath);
 
 // compile component css
 gulp.task('compile', () => {
@@ -24,81 +15,8 @@ gulp.task('compile', () => {
 
 // copy lib files
 gulp.task('lib', ['compile'], () => {
-  const ttf = glob.sync(resolve('./src/*.ttf'));
-  ttf.forEach(ttf => fs.copySync(ttf, './lib/' + path.parse(ttf).base));
   fs.copySync('./lib', '../../lib/vant-css');
   fs.copySync('./lib', '../../es/vant-css');
 });
 
-// extract svg from sketch
-function extractSvg() {
-  shelljs.exec('./scripts/extract-icons.sh');
-  fs.mkdirsSync(path.join(__dirname, './icons'));
-  config.glyphs.forEach(icon => {
-    const src = path.join(__dirname, './icons/', icon.src);
-    if (fs.existsSync(src)) {
-      fs.renameSync(src, path.join(__dirname, './icons', icon.css + '.svg'));
-    }
-  });
-}
-
-// get icon unicode
-function getCodePoints() {
-  const codePoints = {};
-  config.glyphs.forEach((icon, index) => {
-    const svgPath = path.join(__dirname, './icons/', icon.css + '.svg');
-    if (fs.existsSync(svgPath)) {
-      codePoints[icon.css] = 0xf000 + index;
-    }
-  });
-}
-
-// generate ttf from sketch && build icon.css
-gulp.task('icon-font-ttf', () => {
-  extractSvg();
-  return gulp
-    .src(['icons/*.svg'])
-    .pipe(
-      iconfontCss({
-        fontName: config.name,
-        path: 'scripts/icon-template.css',
-        targetPath: './icon.css',
-        normalize: true,
-        firstGlyph: 0xf000,
-        fixedCodepoints: getCodePoints()
-      })
-    )
-    .pipe(
-      iconfont({
-        fontName: config.name,
-        formats: ['ttf']
-      })
-    )
-    .on('glyphs', (glyphs, options) => {})
-    .pipe(gulp.dest('icons'));
-});
-
-gulp.task('icon-font', ['icon-font-ttf'], () => {
-  // remove previous ttf
-  const prevTTFs = glob.sync(resolve('./src/*.ttf'));
-  prevTTFs.forEach(ttf => fs.removeSync(ttf));
-
-  // generate ttf hash
-  const fontPath = resolve('./icons/vant-icon.ttf');
-  const hash = md5File.sync(fontPath).slice(0, 6);
-  fs.renameSync(fontPath, resolve(`./src/vant-icon-${hash}.ttf`));
-
-  // copy icon.css to src
-  let source = fs.readFileSync(resolve('./icons/icon.css'), 'utf-8');
-  source = source.replace('vant-icon.ttf', `vant-icon-${hash}.ttf`);
-  fs.writeFileSync(resolve('./src/icon.css'), source);
-
-  // generate icon-local.css
-  const localIconSource = iconLocalTemplate(config.name, hash);
-  fs.writeFileSync(resolve('./src/icon-local.css'), localIconSource);
-
-  // upload ttf to cdn
-  shelljs.exec(`superman cdn /zanui/icon ./src/vant-icon-${hash}.ttf`);
-});
-
 gulp.task('build', ['lib']);

packages/vant-css/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vant-css",
   "version": "1.1.7",
-  "description": "vant css.",
+  "description": "vant css",
   "main": "lib/index.css",
   "style": "lib/index.css",
   "files": [
@@ -9,18 +9,14 @@
     "src"
   ],
   "scripts": {
-    "build": "gulp build",
-    "build:icons": "gulp icon-font"
+    "build": "gulp build"
   },
   "license": "MIT",
   "devDependencies": {
     "autoprefixer": "^8.3.0",
     "gulp": "^3.9.1",
     "gulp-clean-css": "^3.9.0",
-    "gulp-iconfont": "^9.0.2",
-    "gulp-iconfont-css": "^2.1.0",
     "gulp-postcss": "^7.0.0",
-    "md5-file": "^4.0.0",
     "postcss-easy-import": "^3.0.0",
     "precss": "^2.0.0"
   }

packages/vant-css/scripts/extract-icons.sh

@@ -1,6 +0,0 @@
-#!/bin/sh
-
-basepath=$(dirname $0)
-
-rm -rf $basepath/../icons
-sketchtool export slices --formats=svg --overwriting=YES --save-for-web=YES --output=$basepath/../icons $basepath/../assets/icons.sketch

packages/vant-css/src/icon-local.css

@@ -2,5 +2,5 @@
   font-style: normal;
   font-weight: normal;
   font-family: 'vant-icon';
-  src: url('./vant-icon-243435.ttf') format('truetype');
+  src: url('../icon/vant-icon-9b71af.ttf') format('truetype');
 }

packages/vant-css/src/icon.css

@@ -4,7 +4,7 @@
   font-style: normal;
   font-weight: normal;
   font-family: 'vant-icon';
-  src: url('https://img.yzcdn.cn/zanui/icon/vant-icon-243435.ttf') format('truetype');
+  src: url('https://img.yzcdn.cn/vant/vant-icon-9b71af.ttf') format('truetype');
 }
 
 .van-icon {