fix(builder): fix web fonts building (#27)

Closes #26

package.json

@@ -65,6 +65,7 @@
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
     "fs-extra": "^7.0.0",
+    "globby": "^8.0.1",
     "gm": "^1.23.1",
     "html-minifier": "^3.5.20",
     "jasmine-core": "~2.99.1",

scripts/services/build-web-font.js

@@ -9,16 +9,19 @@ const path = require('path');
 const fs = require('fs-extra');
 
 const processScss = require('./process-scss');
+const prepareSVGsForFonts = require('./web-font-process-svgs');
 const config = require('../config');
 const fileSystemHelper = require('../helpers/fs-helper');
 
 const webFontOptions = {
-  files: path.resolve(config.srcPath, '**/*.svg'),
+  files: path.resolve(config.desPath, '**/icons/svg/*.svg'),
   fontName: 'Eva-Icons',
   template: 'css',
   templateFontName: 'Eva-Icons',
   templateClassName: 'eva',
-  templateFontPath: './fonts'
+  templateFontPath: './fonts',
+  normalize: true,
+  fontHeight: 600,
 };
 
 const buildFont = () => {
@@ -27,33 +30,37 @@ const buildFont = () => {
 
   fileSystemHelper.mkDirByPathSync(dest);
 
-  return webfont(webFontOptions)
-    .then((result) => {
-      const { fontName, template } = result.config;
+  return prepareSVGsForFonts()
+    .then(() => {
+      return webfont(webFontOptions)
+        .then((result) => {
+          const { fontName, template } = result.config;
 
-      return Promise.all(
-        Object.keys(result).map(type => {
-          if (
-            type === 'config' ||
-            type === 'usedBuildInTemplate' ||
-            type === 'glyphsData'
-          ) {
-            return Promise.resolve();
-          }
+          return Promise.all(
+            Object.keys(result).map(type => {
+              if (
+                type === 'config' ||
+                type === 'usedBuildInTemplate' ||
+                type === 'glyphsData'
+              ) {
+                return Promise.resolve();
+              }
 
-          const content = result[type];
-          let file = null;
+              const content = result[type];
+              let file = null;
 
-          if (type !== 'template') {
-            file = path.resolve(dest, `${fontName}.${type}`);
-          } else {
-            file = path.resolve(destTemplate, `${fontName.toLowerCase()}.${template}`);
-          }
+              if (type !== 'template') {
+                file = path.resolve(dest, `${fontName}.${type}`);
+              } else {
+                file = path.resolve(destTemplate, `${fontName.toLowerCase()}.${template}`);
+              }
 
-          return fs.outputFile(file, content);
-        }))
-        .then(() => processScss());
-    });
+              return fs.outputFile(file, content);
+            }))
+            .then(() => processScss())
+            .then(() => fileSystemHelper.remove(path.join(config.desPath, '/style/icons')));
+        });
+  });
 };
 
 module.exports = buildFont;

scripts/services/oprimize-svg.js

@@ -6,16 +6,17 @@
 
 const Svgo = require('svgo');
 
-const optimizeSvg = (svg) => {
+const defaultOptions = [
+  { convertShapeToPath: false },
+  { mergePaths: false },
+  { inlineStyles: { onlyMatchedOnce: false } },
+  { removeAttrs: { attrs: '(fill|stroke.*)' } },
+  { removeTitle: true },
+];
+
+const optimizeSvg = (svg, options = []) => {
   const svgo = new Svgo({
-    plugins: [
-      { removeHiddenElems: false },
-      { convertShapeToPath: false },
-      { mergePaths: false },
-      { inlineStyles: { onlyMatchedOnce: false } },
-      { removeAttrs: { attrs: '(fill|stroke.*)' } },
-      { removeTitle: true },
-    ],
+    plugins: defaultOptions.concat(options),
   });
 
   return svgo.optimize(svg)

scripts/services/process-svgs.js

@@ -18,7 +18,7 @@ const processSvgs = (svgFiles, srcPath, desPath) => {
     const desSvgPath = path.join(desPath, svgFile);
     const svg = fs.readFileSync(svgPath);
 
-    return optimizeSvg(svg)
+    return optimizeSvg(svg, [ { removeHiddenElems: false } ])
       .then((processedSvg) => {
         fs.writeFileSync(desSvgPath, processedSvg);
       });

scripts/services/web-font-process-svgs.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+const fs = require('fs-extra');
+const globby = require('globby');
+const path = require('path');
+
+const config = require('../config');
+const fileSystemHelper = require('../helpers/fs-helper');
+const optimizeSvg = require('./oprimize-svg');
+
+const prepareSVGsForFonts = () => {
+  const srcPath = path.resolve(config.desPath, '**/svg/*.svg');
+  const destPath = path.join(config.desPath, '/style/icons/svg');
+
+  fileSystemHelper.mkDirByPathSync(destPath);
+
+  return globby([srcPath])
+    .then(foundFiles => {
+      return Promise.all(foundFiles.map((svgFile) => {
+        const filesName = path.basename(svgFile);
+        const desSvgPath = path.join(destPath, filesName);
+        const svg = fs.readFileSync(svgFile);
+
+        return optimizeSvg(svg)
+          .then((processedSvg) => {
+            fs.writeFileSync(desSvgPath, processedSvg);
+          });
+      }));
+    });
+};
+
+module.exports = prepareSVGsForFonts;

test.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <title></title>
+<link rel="stylesheet" href="package-build/style/eva-icons.css">
 <script src="https://unpkg.com/eva-icons"></script>
 <body>
 
 <i data-eva="github"></i>
 <i data-eva="github" data-eva-fill="blue" data-eva-hover="true"></i>
 
+<i class="eva eva-5x eva-github"></i>
+
 <script>
   eva.replace({ animation: { type: 'pulse', infinite: true, hover: false }, fill: 'red', width: '100px', height: '100px' })
 </script>