chore: add vant-icons package

packages/vant-icons/build/build-encode.js

@@ -0,0 +1,21 @@
+const fs = require('fs-extra');
+const path = require('path');
+const config = require('../src/config');
+
+function template(fontName, ttf) {
+  return `@font-face {
+  font-style: normal;
+  font-weight: normal;
+  font-family: '${fontName}';
+  src: url('${ttf}') format('truetype');
+}
+`;
+}
+
+module.exports = function encode(fontName, srcDir) {
+  const ttfBase64 = fs.readFileSync(`../src/${fontName}.ttf`, 'base64');
+  fs.writeFileSync(
+    path.join(srcDir, 'encode.less'),
+    template(config.name, `data:font/ttf;base64,${ttfBase64}`)
+  );
+};

packages/vant-icons/build/build-iconfont.js

@@ -0,0 +1,63 @@
+/**
+ * build iconfont from sketch
+ */
+const { src, dest, series } = require('gulp');
+const fs = require('fs-extra');
+const path = require('path');
+const glob = require('fast-glob');
+const shell = require('shelljs');
+const encode = require('./build-encode');
+const md5File = require('md5-file');
+const iconfont = require('gulp-iconfont');
+const iconfontCss = require('gulp-iconfont-css');
+const config = require('../src/config');
+
+const srcDir = path.join(__dirname, '../src');
+const svgDir = path.join(__dirname, '../assets/svg');
+const sketch = path.join(__dirname, '../assets/icons.sketch');
+const template = path.join(__dirname, './template.tpl');
+const formats = ['ttf', 'woff', 'woff2'];
+
+// get md5 from sketch
+const md5 = md5File.sync(sketch).slice(0, 6);
+const fontName = `${config.name}-${md5}`;
+
+// remove previous fonts
+const prevFonts = glob.sync(formats.map(ext => path.join(srcDir, '*.' + ext)));
+prevFonts.forEach(font => fs.removeSync(font));
+
+// generate font from svg && build index.less
+function font() {
+  return src([`${svgDir}/*.svg`])
+    .pipe(
+      iconfontCss({
+        fontName: config.name,
+        path: template,
+        targetPath: '../src/index.less',
+        normalize: true,
+        firstGlyph: 0xf000,
+        cssClass: fontName // this is a trick to pass fontName to template
+      })
+    )
+    .pipe(
+      iconfont({
+        fontName,
+        formats
+      })
+    )
+    .pipe(dest(srcDir));
+}
+
+function upload(done) {
+  // generate encode.less
+  encode(fontName, srcDir);
+
+  // upload font to cdn
+  formats.forEach(ext => {
+    shell.exec(`superman-cdn /vant ${path.join(srcDir, fontName + '.' + ext)}`);
+  });
+
+  done();
+}
+
+exports.default = series(font, upload);

packages/vant-icons/build/export.js

@@ -0,0 +1,18 @@
+const fs = require('fs-extra');
+const path = require('path');
+const shell = require('shelljs');
+
+const svgDir = path.join(__dirname, '../assets/svg');
+const sketch = path.join(__dirname, '../assets/icons.sketch');
+const SKETCH_TOOL_DIR = '/Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool';
+
+fs.removeSync(svgDir);
+
+// extract svg from sketch
+// should install sketchtool first
+// install guide: https://developer.sketchapp.com/guides/sketchtool/
+shell.exec(
+  `${SKETCH_TOOL_DIR} export slices --formats=svg --overwriting=YES --save-for-web=YES --output=${svgDir} ${sketch}`
+);
+
+shell.exec('svgo ./assets/svg/*.svg');

packages/vant-icons/build/template.tpl

@@ -0,0 +1,27 @@
+@font-face {
+  font-style: normal;
+  font-weight: normal;
+  font-family: '<%= fontName %>';
+  src: url('https://img.yzcdn.cn/vant/<%= cssClass %>.woff2') format('woff2'),
+       url('https://img.yzcdn.cn/vant/<%= cssClass %>.woff') format('woff'),
+       url('https://img.yzcdn.cn/vant/<%= cssClass %>.ttf') format('truetype');
+}
+
+.van-icon {
+  position: relative;
+  display: inline-block;
+  font: normal normal normal 14px/1 "<%= fontName %>";
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+
+  &::before {
+    display: inline-block;
+  }
+}
+
+<% _.each(glyphs, function(glyph) { %>.van-icon-<%= glyph.fileName %>:before {
+  content: "\<%= glyph.codePoint %>";
+}
+
+<% }); %>