diff --git a/docs/markdown/en-US/icon.md b/docs/markdown/en-US/icon.md
index ab24205fe..f6b924209 100644
--- a/docs/markdown/en-US/icon.md
+++ b/docs/markdown/en-US/icon.md
@@ -16,6 +16,13 @@ View all usable icons on the right.
```
+#### 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 |
diff --git a/docs/markdown/zh-CN/icon.md b/docs/markdown/zh-CN/icon.md
index b92eb7a05..605693581 100644
--- a/docs/markdown/zh-CN/icon.md
+++ b/docs/markdown/zh-CN/icon.md
@@ -16,6 +16,14 @@ Vue.component(Icon.name, Icon);
```
+#### 使用本地字体文件
+Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件,如果想要使用本地字体文件,请引入下面的 css 文件
+
+```js
+import 'vant/lib/vant-css/icon-local.css';
+```
+
+
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
diff --git a/docs/src/examples.js b/docs/src/examples.js
index ca9198cac..370d7e120 100644
--- a/docs/src/examples.js
+++ b/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);
diff --git a/packages/vant-css/gulpfile.js b/packages/vant-css/gulpfile.js
index 842778f1d..22f62d6da 100644
--- a/packages/vant-css/gulpfile.js
+++ b/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', () => {
- return gulp
- .src('./src/*.css')
- .pipe(postcss())
- .pipe(cssmin())
- .pipe(gulp.dest('./lib'))
- .pipe(gulp.dest('../../lib/vant-css/'));
-});
-
+// generate ttf from sketch && build icon.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');
- const hash = md5File.sync(fontPath).slice(0, 8);
- fs.renameSync(fontPath, path.resolve(__dirname, `./icons/vant-icon-${hash}.ttf`));
+ // remove previous ttf
+ const prevTTFs = glob.sync(resolve('./src/*.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);
- shelljs.exec(`superman cdn /zanui/icon ./icons/vant-icon-${hash}.ttf`);
+ // 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', ['compile']);
+gulp.task('build', ['lib']);
diff --git a/packages/vant-css/scripts/icon-local-template.js b/packages/vant-css/scripts/icon-local-template.js
new file mode 100644
index 000000000..83c9098ab
--- /dev/null
+++ b/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');
+}`;
+};
diff --git a/packages/vant-css/src/icon-local.css b/packages/vant-css/src/icon-local.css
new file mode 100644
index 000000000..3493fc4eb
--- /dev/null
+++ b/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');
+}
\ No newline at end of file
diff --git a/packages/vant-css/src/icon.css b/packages/vant-css/src/icon.css
index 461056e6f..37f7a3345 100644
--- a/packages/vant-css/src/icon.css
+++ b/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 {
diff --git a/packages/vant-css/src/vant-icon-82e489.ttf b/packages/vant-css/src/vant-icon-82e489.ttf
new file mode 100644
index 000000000..cc086e2c7
Binary files /dev/null and b/packages/vant-css/src/vant-icon-82e489.ttf differ