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

Closes #26

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;