fix(icon/lib): 增加base64构建模式

affects: @varlet/icons, @varlet/ui
varletjs · Apr 11, 2021 · ae682cc · ae682cc
1 parent f6d2803
commit ae682cc
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/packages/varlet-icons/lib/index.js b/packages/varlet-icons/lib/index.js
@@ -10,14 +10,14 @@ const SVG_DIR = resolve(CWD, 'svg')
 const DIST_DIR = resolve(CWD, 'dist')
 const FONTS_DIR = resolve(DIST_DIR, 'fonts')
 const CSS_DIR = resolve(DIST_DIR, 'css')
-const formats = ['ttf', 'eot', 'woff', 'woff2']
+const formats = ['ttf', 'woff', 'woff2']
 
 const config = require(resolve(CWD, 'varlet-icons.config.js'))
 
 async function build() {
-  const { publicPath, namespace, fontName, fileName, fontWeight = 'normal', fontStyle = 'normal' } = config
+  const { base64, publicPath, namespace, fontName, fileName, fontWeight = 'normal', fontStyle = 'normal' } = config
 
-  const { ttf, eot, woff, woff2 } = await webfont({
+  const { ttf, woff, woff2 } = await webfont({
     files: `${SVG_DIR}/*.svg`,
     fontName,
     formats,
@@ -39,11 +39,32 @@ async function build() {
     }
   })
 
+  const iconNames = icons.map((iconName) => `  "${iconName.name}"`)
+
+  const indexTemplate = `\
+module.exports = [
+${iconNames.join(',\n')}
+]
+`
+
   const cssTemplate = `\
 @font-face {
   font-family: "${fontName}";
-  src: url("${publicPath}${fileName}-webfont.eot");
-  src: url("${publicPath}${fileName}-webfont.eot") format("embedded-opentype"), url("${publicPath}${fileName}-webfont.woff2") format("woff2"), url("${publicPath}${fileName}-webfont.woff") format("woff"), url("${publicPath}${fileName}-webfont.ttf") format("truetype");
+  src: url("${
+    base64
+      ? `data:application/font-woff2;charset=utf-8;base64,${Buffer.from(woff2).toString('base64')}`
+      : `${publicPath}${fileName}-webfont.woff2`
+  }") format("woff2"),
+    url("${
+      base64
+        ? `data:application/font-woff;charset=utf-8;base64,${woff.toString('base64')}`
+        : `${publicPath}${fileName}-webfont.woff`
+    }") format("woff"),
+    url("${
+      base64
+        ? `data:font/truetype;charset=utf-8;base64,${ttf.toString('base64')}`
+        : `${publicPath}${fileName}-webfont.ttf`
+    }") format("truetype");
   font-weight: ${fontWeight};
   font-style: ${fontStyle};
 }
@@ -67,17 +88,8 @@ ${icons
   .join('\n\n')}
 `
 
-  const iconNames = icons.map((iconName) => `  "${iconName.name}"`)
-
-  const indexTemplate = `\
-module.exports = [
-${iconNames.join(',\n')}
-]
-`
-
   await Promise.all([
     writeFile(resolve(FONTS_DIR, `${fileName}-webfont.ttf`), ttf),
-    writeFile(resolve(FONTS_DIR, `${fileName}-webfont.eot`), eot),
     writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff`), woff),
     writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff2`), woff2),
     writeFile(resolve(CSS_DIR, `${fileName}.css`), cssTemplate),

diff --git a/packages/varlet-icons/varlet-icons.config.js b/packages/varlet-icons/varlet-icons.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   namespace: 'var-icon',
-  publicPath: '~@varlet/icons/dist/fonts/',
   fileName: 'varlet-icons',
   fontName: 'varlet-icons',
+  base64: true,
 }
diff --git a/packages/varlet-ui/docs/quickstart.zh-CN.md b/packages/varlet-ui/docs/quickstart.zh-CN.md
@@ -22,6 +22,7 @@
 ```
 
 ### Webpack/Vite
+
 ```shell
 # 通过npm或yarn安装
 # npm
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,6 +22,7 @@ @@
     ```
     ### Webpack/Vite
     ```shell
     # 通过npm或yarn安装
     # npm
@@ Expand Down @@