feat(icons-to-woff): Allow to generate variable height fonts

Author: jantimon

example/default/dist/styles.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: M6002e;
-  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIwleU9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJgAAACkgs5VC2hlYWQAAAJoAAAALwAAADYJDAPFaGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2DKSSzJY+BzcfMJYZBiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCAClZBUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nA2IQQ6CMBAAu9vSLVBaqVJMDxKNgWiMhpDQhAPc/IH//4I/0M4kcxgGvwR8kbOJsXGOyQ1W2HCKL4hTnPu0Vmh9BxZakhZkCu/Qt54yobWr902zxM6KijghAuXGPa7hdMxyiSC4kCqvrV4yVQgSrr6fn94YjjCstnchKOsqR6Uy+hNQFVRqVcK4u7xvhbYHz9gfcc4RpXicY2BkYGAA4pOzP3XG89t8ZeBmYgCBy/8eJsPo/0DA+IGJGcjlYABLAwCqGw+0AHicY2BkYGBiAAHGd//////H+IGBkQEVMAEAg2cF4gAAAAAAAAHu//8AAAAAAFIAAHicY2BkYGBgYjBhANEgFgMDFxAyMPwH8xkADasBTgAAeJxlkD1uwkAUhMdgSAJSghQpKbNVCiKZn5IDQE9Bl8KYtTGyvdZ6QaLLCXKEHCGniHKCHChj82hgLT9/M2/e7soABviFh3p5uG1qvVq4oTpxm/Qg7JOfhTvo40W4S38o3MMbpsJ9POKdO3j+HZ0BSuEW7vEh3Kb/KeyTv4Q7eMK3cJf+j3APK/wJ9/HqDdPIFLEp3FIn+yy0Z3n+rrStUlOoSTA+WwtdaBs6vVHro6oOydS5WMXW5GrOrs4yo0prdjpywda5cjYaxeIHkcmRIoJBgbipDktoJNgjQwh71b3UK6YtKvq1VpggwPgqtWCqaJIhlcaGyTWOrBUOPG1K1zGt+FrO5KS5zGreJCMr/u+6t6MT0Q+wbaZKzDDiE1/kg+YO+T89EV6oAAAAeJxjYGKAAFYG7ICJkYmRmYEp04CBAQADvgCsAA==") format('woff');
+  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIwleU9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJgAAACkgs5VC2hlYWQAAAJoAAAALgAAADYJHf2zaGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2DKSSzJY+BzcfMJYZBiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCAClZBUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nA2IQQ6CMBAAu9vSLVBaqVJMDxKNgWiMhpDQhAPc/IH//4I/0M4kcxgGvwR8kbOJsXGOyQ1W2HCKL4hTnPu0Vmh9BxZakhZkCu/Qt54yobWr902zxM6KijghAuXGPa7hdMxyiSC4kCqvrV4yVQgSrr6fn94YjjCstnchKOsqR6Uy+hNQFVRqVcK4u7xvhbYHz9gfcc4RpXicY2BkYGAA4pPl/9bG89t8ZeBmYgCBK+z3omD0fyBg/MDEDORyMIClAXmrDbwAAHicY2BkYGBiAAHGd//////H+IGBkQEVMAEAg2cF4gAAAAAAAAHu//8AAAAAAFIAAHicY2BkYGBgYjBhANEgFgMDFxAyMPwH8xkADasBTgAAeJxlkD1uwkAUhMdgSAJSghQpKbNVCiKZn5IDQE9Bl8KYtTGyvdZ6QaLLCXKEHCGniHKCHChj82hgLT9/M2/e7soABviFh3p5uG1qvVq4oTpxm/Qg7JOfhTvo40W4S38o3MMbpsJ9POKdO3j+HZ0BSuEW7vEh3Kb/KeyTv4Q7eMK3cJf+j3APK/wJ9/HqDdPIFLEp3FIn+yy0Z3n+rrStUlOoSTA+WwtdaBs6vVHro6oOydS5WMXW5GrOrs4yo0prdjpywda5cjYaxeIHkcmRIoJBgbipDktoJNgjQwh71b3UK6YtKvq1VpggwPgqtWCqaJIhlcaGyTWOrBUOPG1K1zGt+FrO5KS5zGreJCMr/u+6t6MT0Q+wbaZKzDDiE1/kg+YO+T89EV6oAAAAeJxjYGKAAFYG7ICJkYmRmYEp04CBAQADvgCsAA==") format('woff');
   font-weight: normal;
   font-style: normal;
 }

lib/icons-to-woff.js

@@ -3,20 +3,25 @@ var svgicons2svgfont = require('svgicons2svgfont');
 var svg2ttf = require('svg2ttf');
 var ttf2woff = require('ttf2woff');
 var Readable = require('stream').Readable;
-var fs = require('fs');
 
-module.exports = function createIconFont (icons, options) {
+/**
+ * @param  {InputFileSystem} fs      An input file system
+ * @param  {String[]} icons          Array of icon file paths
+ * @param  {Object} options          SVG-Font options
+ * @return {Promise<String>}         Base64 encoded font
+ */
+module.exports = function createIconFont (fs, icons, options) {
   assert(typeof options === 'object', 'Options are mandatory.');
+
   return new Promise((resolve, reject) => {
     var fontStream = svgicons2svgfont({
       name: options.name,
-      normalize: true,
-      fontHeight: 512,
       log: function () {},
       error: function (err) {
         reject(err);
       }
     });
+    var fontIconHeight;
     var svgFont = '';
     fontStream
       .on('finish', function () {
@@ -36,10 +41,17 @@ module.exports = function createIconFont (icons, options) {
         name: 'i' + i
       };
       fontStream.write(glyph);
-      fs.readFile(filename, 'utf8', function (err, result) {
+      fs.readFile(filename, function (err, result) {
+        result = result.toString();
         if (err) {
           return reject(err);
         }
+        var iconHeight = getSvgHeight(result, filename);
+        if (fontIconHeight && fontIconHeight !== iconHeight) {
+          return reject(`SVG font generation failed as not all icons have the same height. ` +
+            `Found: "${fontIconHeight}" and "${iconHeight}".`);
+        }
+        fontIconHeight = iconHeight;
         // prevent svgs with fill="none" from beeing translated into an empty symbol
         result = result.replace(/\sfill\s*=\s*["']?none['"]?/ig, '');
         glyph.push(result);
@@ -52,3 +64,18 @@ module.exports = function createIconFont (icons, options) {
   .then((ttfFont) => ttf2woff(ttfFont).buffer)
   .then((woffFont) => new Buffer(woffFont).toString('base64'));
 };
+
+/**
+ * Reads the height of the svg
+ *
+ * @param  {String} svg      the svg content
+ * @param  {String} filename the file name for error reporting
+ * @return {Number}          height
+ */
+function getSvgHeight (svg, filename) {
+  const parseSvg = /<svg[^>]+height\s*=\s*["']?(\d+)\s*(pt|)["']?/i.exec(svg);
+  if (!parseSvg) {
+    throw new Error(`could not read height for '${filename}'.`);
+  }
+  return parseSvg[1];
+}

lib/loader.js

@@ -10,7 +10,7 @@ module.exports = function () {
   var callback = this.async();
   var query = loaderUtils.parseQuery(this.query);
   query.svgs.forEach((svg) => this.addDependency(path.resolve(svg)));
-  createIconFont(query.svgs, query)
+  createIconFont(this._compiler.inputFileSystem, query.svgs, query)
     .then((result) => {
       var url = '"data:application/x-font-woff;charset=utf-8;base64,' + result + '"';
       callback(null, 'module.exports=' + JSON.stringify(url) + ';');

lib/postcss-plugin.js

@@ -111,6 +111,7 @@ module.exports = postcss.plugin('iconfont-webpack', function (opts) {
         var fontName = md5sum.digest('hex').substr(0, 6);
         // Prefix the fontname with a letter as fonts with a leading number are not allowed
         fontName = String.fromCharCode(fontName.charCodeAt(0) + 20) + fontName.substr(1);
+
         // Update the css
         return Promise.all([
           addFontDeclaration(fontName, root, svgPaths.resolved),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iconfont-webpack-plugin",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Simple icon font handling for webpack",
   "main": "index.js",
   "files": [