[Improvement] Support local font file (#408)

docs/markdown/en-US/icon.md

@@ -16,6 +16,13 @@ View all usable icons on the right.
 <van-icon name="success" />
 ```
 
+#### Use local font file
+Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file.
+
+```js
+import 'vant/lib/vant-css/icon-local.css';
+```
+
 ### API
 
 | Attribute | Description | Type | Default | Accepted Values |

docs/markdown/zh-CN/icon.md

@@ -16,6 +16,14 @@ Vue.component(Icon.name, Icon);
 <van-icon name="success" />
 ```
 
+#### 使用本地字体文件
+Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件，如果想要使用本地字体文件，请引入下面的 css 文件
+
+```js
+import 'vant/lib/vant-css/icon-local.css';
+```
+
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |

docs/src/examples.js

@@ -5,6 +5,7 @@ import routes from './router.config';
 import Vant, { Lazyload } from 'packages';
 import VantDoc from 'vant-doc';
 import 'packages/vant-css/src/index.css';
+import 'packages/vant-css/src/icon-local.css';
 import 'vant-doc/src/helper/touch-simulator';
 
 Vue.use(Vant);

packages/vant-css/gulpfile.js

@@ -8,7 +8,27 @@ 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', () => {
+  return gulp
+    .src('./src/*.css')
+    .pipe(postcss())
+    .pipe(cssmin())
+    .pipe(gulp.dest('./lib'));
+});
+
+// copy lib files
+gulp.task('lib', ['compile'], () => {
+  const ttf = glob.sync(resolve('./src/*.ttf'));
+  ttf.forEach(ttf => fs.copy(ttf, './lib/' + path.parse(ttf).base));
+  fs.copy('./lib', '../../lib/vant-css');
+});
+
+// extract svg from sketch
 function extractSvg() {
   shelljs.exec('./scripts/extract-icons.sh');
   fs.mkdirsSync(path.join(__dirname, './icons'));
@@ -20,6 +40,7 @@ function extractSvg() {
   });
 }
 
+// get icon unicode
 function getCodePoints() {
   const codePoints = {};
   config.glyphs.forEach((icon, index) => {
@@ -30,15 +51,7 @@ function getCodePoints() {
   });
 }
 
-gulp.task('compile', () => {
+// generate ttf from sketch && build icon.css
-  return gulp
-    .src('./src/*.css')
-    .pipe(postcss())
-    .pipe(cssmin())
-    .pipe(gulp.dest('./lib'))
-    .pipe(gulp.dest('../../lib/vant-css/'));
-});
-
 gulp.task('icon-font-ttf', () => {
   extractSvg();
   return gulp
@@ -64,15 +77,26 @@ gulp.task('icon-font-ttf', () => {
 });
 
 gulp.task('icon-font', ['icon-font-ttf'], () => {
-  const fontPath = path.resolve(__dirname, './icons/vant-icon.ttf');
+  // remove previous ttf
-  const hash = md5File.sync(fontPath).slice(0, 8);
+  const prevTTFs = glob.sync(resolve('./src/*.ttf'));
-  fs.renameSync(fontPath, path.resolve(__dirname, `./icons/vant-icon-${hash}.ttf`));
+  prevTTFs.forEach(ttf => fs.removeSync(ttf));
 
-  let source = fs.readFileSync(path.resolve(__dirname, './icons/icon.css'), 'utf-8');
+  // 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);
 
-  fs.writeFileSync(path.resolve(__dirname, './src/icon.css'), source);
+  // generate icon-local.css
-  shelljs.exec(`superman cdn /zanui/icon ./icons/vant-icon-${hash}.ttf`);
+  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', ['compile']);
+gulp.task('build', ['lib']);

packages/vant-css/scripts/icon-local-template.js

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

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

@@ -0,0 +1,6 @@
+@font-face {
+  font-style: normal;
+  font-weight: normal;
+  font-family: 'vant-icon';
+  src: url('./vant-icon-82e489.ttf') format('truetype');
+}

packages/vant-css/src/icon.css

@@ -2,7 +2,7 @@
   font-style: normal;
   font-weight: normal;
   font-family: 'vant-icon';
-  src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-b95631de.ttf') format('truetype');
+  src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-82e489.ttf') format('truetype');
 }
 
 .van-icon {