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