fix(icons-to-woff): ignore fill="none" in svgs

Author: jantimon

README.md

@@ -81,14 +81,21 @@ With this plugin it is pretty easy to use pixel images, svgs and font-icons side
 
 ## When should you use icon fonts over pure SVGs?
 
-Icon fonts are dead - long live font icons.  
 SVGs have some disadvantages and lack certain features especially when used inside pseudo elements:
 
 * [CSS-Transform issues in older Internet Explorer versions](http://stackoverflow.com/questions/21298338/css-transform-on-svg-elements-ie9)
 * [IE9 - IE 11 scaling issues](https://gist.github.com/larrybotha/7881691)
 * Fill color doesn't work for background SVG images
 * Inline SVGs are resolved relative to the page not to the css
 
+## What about all the rant on icon fonts?
+
+Like all technologies there are disadvantages when using icon fonts.  
+We tried to apply best practices to solve the main issues for you.
+
+* Screen Reader friendly: All generated icons use the [Unicode Private Use Areas](https://en.wikipedia.org/wiki/Private_Use_Areas)
+* Prevents [FOUT](http://www.paulirish.com/2009/fighting-the-font-face-fout/)
+
 # License
 
 This project is licensed under [MIT](https://github.com/jantimon/iconfont-webpack-plugin/blob/master/LICENSE).

example/default/account.svg

@@ -1,2 +1,3 @@
+<link rel="stylesheet" type="text/css" href="./styles.css">
 <script src="bundle.js"></script>
-<a>click me</a>
+<a href="#">click me</a>

example/default/dist/index.html

@@ -1,10 +1,16 @@
 @font-face {
   font-family: i96002e;
-  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQkAAsAAAAABlAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIwleU9TLzIAAAFEAAAAOwAAAFYvsTmFY21hcAAAAYAAAABKAAABcOEoo6pnbHlmAAABzAAAAJQAAACkZGNj1mhlYWQAAAJgAAAALAAAADYI84ykaGhlYQAAAowAAAAZAAAAJAPZAgNobXR4AAACqAAAAAgAAAAIAgAAAGxvY2EAAAKwAAAABgAAAAYAUgAAbWF4cAAAArgAAAAeAAAAIAENAEBuYW1lAAAC2AAAASkAAAIWm5e+CnBvc3QAAAQEAAAAHwAAADCXn3B2eJxjYGRgYOBiMGCwY2DKSSzJY+BzcfMJYZBiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCAClZBUgAeJxjYGRkYJzAwMrAwBDPmAYk3aH0VwZJhhYGBiYGVmYGrCAgzTWFweEBwwOgGiDQY4IIM4IIAGDIB5oAeJztkLENgDAQA8/KQ4EYgSo1s1Cxv9gk+RjYIpbOkk9fPbAAJTmTAN2IkSut7AubfVB9E8M/tPZ37nCjlZndfXzLv3pBHRomCVEAAHicFYrLCoMwEACza9yNJrpWIYEWEbS0goc+BHOqnvv/l177J7Uzt2EUqB34wFfNSsXl7wYrbDjHG8Q5Lpc9rRB8BwKBSYCYBsEOffA8aZ1bKQ9187ifCu0ICRHIOLl2/uhTkwImSZKyEZc/NRtNupfq3I61K/azX1wvPnBRWaGMnX0HMIYyy/lUtq8hs65uflchDfh4nGNgZGBgAOLVr5/Xx/PbfGXgZmIAgcv/lj5GphlvMD4EUhwMYGkAgX0NInicY2BkYGBiAAEIyXiDgZEBFTABABDqAOIAAAAAAAAAAgAAAAAAAAAAUgAAeJxjYGRgYGBiMGEA0SAWAwMXEDIw/AfzGQANqwFOAAB4nGWQPW7CQBSEx2BIAlKCFCkps1UKIpmfkgNAT0GXwpi1MbK91npBossJcoQcIaeIcoIcKGPzaGAtP38zb97uygAG+IWHenm4bWq9WrihOnGb9CDsk5+FO+jjRbhLfyjcwxumwn084p07eP4dnQFK4Rbu8SHcpv8p7JO/hDt4wrdwl/6PcA8r/An38eoN08gUsSncUif7LLRnef6utK1SU6hJMD5bC11oGzq9Ueujqg7J1LlYxdbkas6uzjKjSmt2OnLB1rlyNhrF4geRyZEigkGBuKkOS2gk2CNDCHvVvdQrpi0q+rVWmCDA+Cq1YKpokiGVxobJNY6sFQ48bUrXMa34Ws7kpLnMat4kIyv+77q3oxPRD7BtpkrMMOITX+SD5g75Pz0RXqgAAAB4nGNgYoAAVgbsgImRiZGZgS0zOT9P14CBAQAN+wIdAA==") format('woff');
+  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIwleU9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJgAAACkgs5VC2hlYWQAAAJoAAAALgAAADYJC91ZaGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2DKSSzJY+BzcfMJYZBiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCAClZBUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nA2IQQ6CMBAAu9vSLVBaqVJMDxKNgWiMhpDQhAPc/IH//4I/0M4kcxgGvwR8kbOJsXGOyQ1W2HCKL4hTnPu0Vmh9BxZakhZkCu/Qt54yobWr902zxM6KijghAuXGPa7hdMxyiSC4kCqvrV4yVQgSrr6fn94YjjCstnchKOsqR6Uy+hNQFVRqVcK4u7xvhbYHz9gfcc4RpXicY2BkYGAA4pNz7BPj+W2+MnAzMYDA5X/ndGH0fyBg/MDEDORyMIClAXeIDkgAAHicY2BkYGBiAAHGd//////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;
 }
 
 a:before {
   font-family: i96002e;
+  text-rendering: auto;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  font-weight: normal;
   content: '\E000';
   transition: 0.5s color;
 }

example/default/dist/styles.css

@@ -2,6 +2,7 @@ var assert = require('assert');
 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) {
@@ -11,7 +12,10 @@ module.exports = function createIconFont (icons, options) {
       name: options.name,
       normalize: true,
       fontHeight: 512,
-      log: function () {}
+      log: function () {},
+      error: function (err) {
+        reject(err);
+      }
     });
     var svgFont = '';
     fontStream
@@ -25,16 +29,26 @@ module.exports = function createIconFont (icons, options) {
         reject(err);
       });
     icons.forEach((filename, i) => {
-      var glyph = fs.createReadStream(filename);
+      var glyph = new Readable();
+      glyph._read = function noop () {};
       glyph.metadata = {
         unicode: [String.fromCodePoint('\ue000'.charCodeAt(0) + i)],
-        name: 'icon-' + i
+        name: 'i' + i
       };
       fontStream.write(glyph);
+      fs.readFile(filename, 'utf8', function (err, result) {
+        if (err) {
+          return reject(err);
+        }
+        // prevent svgs with fill="none" from beeing translated into an empty symbol
+        result = result.replace(/\sfill\s*=\s*["']?none['"]?/ig, '');
+        glyph.push(result);
+        glyph.push(null);
+      });
     });
     fontStream.end();
   })
   .then((svgFont) => svg2ttf(svgFont, {}).buffer)
   .then((ttfFont) => ttf2woff(ttfFont).buffer)
-  .then((wofffont) => new Buffer(wofffont).toString('base64'));
+  .then((woffFont) => new Buffer(woffFont).toString('base64'));
 };

lib/icons-to-woff.js

@@ -14,5 +14,12 @@ module.exports = function () {
     .then((result) => {
       var url = '"data:application/x-font-woff;charset=utf-8;base64,' + result + '"';
       callback(null, 'module.exports=' + JSON.stringify(url) + ';');
-    }, callback);
+    }, function (err) {
+      var url = '"data:application/x-font-woff;charset=utf-8;base64,"';
+      if (typeof err === 'string') {
+        err = new Error(err);
+      }
+      err.message += ' - Tried to compile: ' + JSON.stringify(query.svgs, null, 2);
+      callback(new Error(err), 'module.exports=' + JSON.stringify(url) + ';');
+    });
 };

lib/loader.js

@@ -49,6 +49,22 @@ function replaceIconFontDeclarations (fontName, postCssRoot, unresolvedSvgPaths)
         prop: 'font-family',
         value: fontName
       });
+      decl.cloneBefore({
+        prop: 'text-rendering',
+        value: 'auto'
+      });
+      decl.cloneBefore({
+        prop: '-webkit-font-smoothing',
+        value: 'auto'
+      });
+      decl.cloneBefore({
+        prop: '-moz-osx-font-smoothing',
+        value: 'auto'
+      });
+      decl.cloneBefore({
+        prop: 'font-weight',
+        value: 'normal'
+      });
       // Look up the index of the svg in the array to generate the unicode char position
       var iconCharCode = unresolvedSvgPaths.indexOf(getRelativeIconPath(decl.value));
       decl.value = '\'\\e' + _.padStart(iconCharCode.toString(16), 3, '0') + '\'';
@@ -70,7 +86,13 @@ function addFontDeclaration (fontName, postCssRoot, resolvedSvgs) {
   // Use ~ to tell the loader-utils of the css loader that this is a webpack path
   // Use !! to tell webpack that we don't want any other loader to kick in
   var url = '~!!' + require.resolve('./loader.js') + '?' + JSON.stringify(options) + '!' + require.resolve('../');
-  postCssRoot.prepend(postcss.parse('@font-face { font-family: ' + fontName + '; src:url(\'' + url + '\') format(\'woff\') }'));
+  postCssRoot.prepend(postcss.parse(
+    '@font-face { ' +
+    'font-family: ' + fontName + '; src:url(\'' + url + '\') format(\'woff\');' +
+    'font-weight: normal;' +
+    'font-style: normal;' +
+    '}'
+  ));
 }
 
 module.exports = postcss.plugin('iconfont-webpack', function (opts) {