iconize - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

main.js

 // Generated by CoffeeScript 1.6.3
 (function() {
-  var async, changeExt, defaultIconName, defaultOptions, extend, fs, genPngCss, genSvgCss, gm, iconizeAll, iconizeSingle, optimizeSvg, path, svgStrToUri, svgToPng, svgo, trycatch, url, _;
+  var async, baseNameNoExt, changeExt, defaultCssSelector, defaultOptions, extend, fs, genCss, iconizeAll, iconizeSingle, lowercaseBaseNameNoExt, optimizeSvg, path, pngName, svg2png, svgDims, svgStrToUri, svgToPng, svgo, temp, trycatch, xml2js;
 
-  _ = require('lodash');
-
   async = require('async');
@@ -15,8 +13,10 @@
 
-  url = require('url');
+  svgo = require('svgo');
 
-  gm = require('gm');
+  svg2png = require('svg2png');
 
-  svgo = require('svgo');
+  temp = require('temp');
 
+  xml2js = require('xml2js');
+
   trycatch = function(fn) {
@@ -30,10 +30,20 @@ try {
 
-  defaultIconName = function(filePath) {
-    var baseName, baseNameNoExt, extName;
+  baseNameNoExt = function(filePath) {
+    var baseName, ext;
     baseName = path.basename(filePath);
-    extName = path.extname(filePath);
-    baseNameNoExt = baseName.slice(0, baseName.length - extName.length);
-    return baseNameNoExt.replace(/[^-_A-Za-z0-9]/g, '').toLowerCase();
+    ext = path.extname(filePath);
+    return baseName.slice(0, baseName.length - ext.length);
   };
 
+  lowercaseBaseNameNoExt = function(filePath) {
+    return baseNameNoExt(filePath).replace(/[^-_A-Za-z0-9]/g, '').toLowerCase();
+  };
+
+  defaultCssSelector = function(svgPath, variant) {
+    var base, selector;
+    base = lowercaseBaseNameNoExt(svgPath);
+    selector = variant.selector || '';
+    return ".icon-" + base + selector;
+  };
+
   changeExt = function(fromPath, toExt) {
@@ -58,18 +68,50 @@ var toPath;
 
-  genSvgCss = function(iconName, variant, opts) {
-    return "." + opts.cssPrefix + iconName + variant.selector + " {\n    width: " + opts.width + "px;\n    height: " + opts.height + "px;\n    background-size: contain;\n    background-image: url(" + (svgStrToUri(variant.optSvgStr)) + ");\n }";
+  pngName = function(svgPath, variant) {
+    var filePath;
+    filePath = baseNameNoExt(svgPath);
+    if (variant.name != null) {
+      filePath += "-" + variant.name;
+    }
+    return filePath += '.png';
   };
 
-  genPngCss = function(iconName, variant, opts) {
-    var pngUrl;
-    pngUrl = url.resolve(opts.pngPrefix, variant.pngPath);
-    return "." + opts.cssPrefix + iconName + variant.selector + " {\n    width: " + opts.width + "px;\n    height: " + opts.height + "px;\n    background-size: contain;\n    background-image: url(" + pngUrl + ");\n}";
+  svgDims = function(svgStr, opts, done) {
+    return xml2js.parseString(svgStr, function(err, obj) {
+      var height, width, _ref, _ref1, _ref2, _ref3;
+      width = (obj != null ? (_ref = obj.svg) != null ? (_ref1 = _ref.$) != null ? _ref1.width : void 0 : void 0 : void 0) || opts.defaultWidth;
+      height = (obj != null ? (_ref2 = obj.svg) != null ? (_ref3 = _ref2.$) != null ? _ref3.width : void 0 : void 0 : void 0) || opts.defaultHeight;
+      return done(null, {
+        width: width,
+        height: height
+      });
+    });
   };
 
-  svgToPng = function(svgStr, pngPath, opts, done) {
-    var svgBuf;
-    svgBuf = new Buffer(svgStr);
-    return gm(svgBuf).resize(opts.width, opts.height).write(pngPath, done);
+  genCss = function(svgPath, variant, opts, done) {
+    var pngUrl, sep;
+    sep = /\/$/.test(opts.cssUrlPrefix) ? '' : '/';
+    pngUrl = opts.cssUrlPrefix + sep + pngName(svgPath, variant);
+    return svgDims(variant.svgStr, opts, function(err, dims) {
+      var css;
+      css = "" + (opts.cssSelector(svgPath, variant)) + " {\n    width: " + dims.width + "px;\n    height: " + dims.height + "px;\n    background-image: url(" + pngUrl + ");\n    background-image: url(" + (svgStrToUri(variant.svgStr)) + "), none;\n}";
+      return done(null, css);
+    });
   };
 
+  svgToPng = function(svgStr, pngPath, done) {
+    var tempPath;
+    tempPath = temp.path({
+      suffix: '.svg'
+    });
+    return fs.writeFile(tempPath, svgStr, function(err) {
+      if (err) {
+        return done(err);
+      }
+      return svg2png(tempPath, pngPath, function(err) {
+        fs.unlink(tempPath);
+        return done(err);
+      });
+    });
+  };
+
   iconizeSingle = function(svgPath, opts, done) {
@@ -80,7 +122,6 @@ if (done == null) {
     return fs.readFile(svgPath, function(err, svgBuf) {
-      var fn, iconName, iconVariants, o, svgStr;
+      var fn, iconVariants, svgStr;
       if (err) {
         return done(err);
       }
-      iconName = opts.iconName(svgPath);
       svgStr = svgBuf.toString();
@@ -95,42 +136,37 @@ iconVariants = opts.variants.map(function(v) {
       iconVariants.unshift({
-        name: '',
-        selector: '',
+        name: null,
+        selector: null,
         svgStr: svgStr
       });
-      o = new svgo();
       fn = function(v, done) {
         return optimizeSvg(v.svgStr, function(err, optStr) {
-          v.optSvgStr = optStr;
+          v.svgStr = optStr;
           return done(null);
         });
       };
-      return async.each(iconVariants, fn, function(err) {
-        var pngCss, svgCss;
+      return async.eachSeries(iconVariants, fn, function(err) {
+        var genCssFn;
         if (err) {
           return done(err);
         }
-        iconVariants.forEach(function(v) {
-          var pngName;
-          pngName = iconName;
-          if (v.name !== '') {
-            pngName += "-" + v.name;
-          }
-          return v.pngPath = path.join(opts.pngDir, "" + pngName + ".png");
-        });
-        svgCss = iconVariants.map(function(v) {
-          return genSvgCss(iconName, v, opts);
-        });
-        svgCss = svgCss.join('\n');
-        pngCss = iconVariants.map(function(v) {
-          return genPngCss(iconName, v, opts);
-        });
-        pngCss = pngCss.join('\n');
-        fn = function(v, done) {
-          return svgToPng(v.svgStr, v.pngPath, opts, done);
+        genCssFn = function(v, done) {
+          return genCss(svgPath, v, opts, done);
         };
-        return async.each(iconVariants, fn, function(err) {
+        return async.mapSeries(iconVariants, genCssFn, function(err, cssList) {
+          var css, genPngFn;
           if (err) {
             return done(err);
           }
-          return done(null, [svgCss, pngCss]);
+          css = cssList.join('\n');
+          genPngFn = function(v, done) {
+            var pngPath;
+            pngPath = path.join(opts.pngDir, pngName(svgPath, v));
+            return svgToPng(v.svgStr, pngPath, done);
+          };
+          return async.eachSeries(iconVariants, genPngFn, function(err) {
+            if (err) {
+              return done(err);
+            }
+            return done(null, css);
+          });
         });
@@ -147,4 +183,4 @@ });
     opts = extend(defaultOptions, opts);
-    if (opts.pngPrefix == null) {
-      opts.pngPrefix = opts.pngDir;
+    if (opts.cssUrlPrefix == null) {
+      opts.cssUrlPrefix = opts.pngDir;
     }
@@ -157,18 +193,9 @@ trycatch(function() {
     };
-    return async.map(pathList, fn, function(err, results) {
-      var pngCss, svgCss, _ref;
+    return async.mapSeries(pathList, fn, function(err, cssList) {
+      var cssData;
       if (err) {
         return done(err);
       }
-      _ref = _.zip(results), svgCss = _ref[0], pngCss = _ref[1];
-      svgCss = svgCss.join('\n');
-      pngCss = pngCss.join('\n');
-      try {
-        fs.writeFileSync(opts.svgCssPath, svgCss);
-        fs.writeFileSync(opts.pngCssPath, pngCss);
-      } catch (_error) {
-        err = _error;
-        return done(err);
-      }
-      return done(null);
+      cssData = cssList.join('\n');
+      return fs.writeFile(opts.cssPath, cssData, done);
     });
@@ -178,9 +205,7 @@ };
   defaultOptions = {
-    width: 32,
-    height: 32,
-    iconName: defaultIconName,
-    svgCssPath: 'svg-icons.css',
-    pngCssPath: 'png-icons.css',
+    defaultWidth: 32,
+    defaultHeight: 32,
+    cssPath: 'icons.css',
     pngDir: 'png',
-    cssPrefix: 'icon-',
+    cssSelector: defaultCssSelector,
     variants: []
@@ -187,0 +212,0 @@ };

package.json

 {
   "name": "iconize",
-  "version": "0.0.1",
-  "description": "Converts a bunch of SVG icons to CSS data URLs with PNG fallbacks",
+  "version": "0.1.0",
+  "description": "Converts a bunch of SVG icons to CSS data URLs with PNG fallbacks.",
   "keywords": [
@@ -11,5 +11,5 @@ "icon",
   "author": "Tiago Quelhas <[e-mail]>",
-  "repository" : {
-    "type" : "git",
-    "url" : "http://github.com/tjgq/iconize"
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/tjgq/iconize"
   },
@@ -25,7 +25,9 @@ "homepage": "http://github.com/tjgq/iconize",
     "async": "~0.2.10",
-    "gm": "~1.14.2",
     "lodash": "~2.4.1",
     "svgo": "~0.4.4",
-    "extend": "~1.2.1"
+    "extend": "~1.2.1",
+    "svg2png": "~1.0.1",
+    "temp": "~0.6.0",
+    "xml2js": "~0.4.1"
   }
 }

README.md

@@ -11,23 +11,23 @@ # iconize
 
-  * width: icon width (default: 32)
+  * *defaultWidth*: default icon width in pixels, when unspecified by the SVG file. The default is `32`.
 
-  * height: icon height (default: 32)
+  * *defaultHeight*: default icon height in pixels, when unspecified by the SVG file. The default is `32`.
 
-  * iconName: a function that takes a path to an svg file and returns an icon name suitable for inclusion in a filename and a CSS class name. Default: returns the basename of the file, without the extension, converted to lowercase and with all characters removed except letters, digits, hyphen and underscore.
+  * *cssPath*: path to generated CSS file. The default is `icons.css`.
 
-  * svgCssPath: path to generated CSS file, SVG version (default: `svg-icons.css`)
+  * *pngDir*: path to the directory where PNG files are placed, which will be created if nonexistent. The default is `png`.
 
-  * pngCssPath: path to generated CSS file, PNG version (default: `png-icons.css`)
+  * *cssUrlPrefix*: path to PNG files used by CSS URLs. By default, the value of *pngDir* is used.
 
-  * pngDir: path to the directory where PNG files are placed; will be created if nonexistent (default: `png`)
+  * *cssSelector*: a function taking an SVG path and a variant (see below) as arguments, and returning the CSS selector for the variant. The default is `.icon-#{base}#{selector}`, where
 
-  * pngPrefix: path to PNG files used by CSS URLs (default: same as pngDir)
+    * *base* is the basename of the SVG path, converted to lowercase, and with all characters other than letters, digits, hyphen and underscore removed.
 
-  * cssPrefix: prefix for CSS classes (default: `icon-`)
+    * *selector* is *variant.selector*.
 
-  * variants: a (possibly empty) array of objects with keys:
-    * name: variant name to be appended to PNG file names
-    * selector: CSS selector to be appended to CSS classes
-    * transform: a function taking a string and returning another string.
+  * *variants*: a (possibly empty) array of objects with keys:
+    * *name*: variant name to be appended to PNG file names.
+    * *selector*: string to be appended to the CSS selector for this variant.
+    * *transform*: a function taking an SVG string and returning another SVG string.
 
 Variants allow the creation of alternative versions of the icons by transforming the SVG (e.g., change the color on hover).

No alert changes

Improved metrics

Total package byte prevSize

12804

increased by9.14%

Lines of code

185

increased by13.5%

Worsened metrics

Dependency count

7

increased by40%

Dependency changes

• + Addedsvg2png@~1.0.1

• + Addedtemp@~0.6.0

• + Addedxml2js@~0.4.1

• + Addedansi-regex@2.1.1(transitive)

• + Addedansi-styles@2.2.1(transitive)

• + Addedasn1@0.2.6(transitive)

• + Addedassert-plus@0.2.01.0.0(transitive)

• + Addedasync@2.6.4(transitive)

• + Addedaws-sign2@0.6.0(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbcrypt-pbkdf@1.0.2(transitive)

• + Addedbl@1.0.3(transitive)

• + Addedboom@2.10.1(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedcaseless@0.11.0(transitive)

• + Addedchalk@1.1.3(transitive)

• + Addedcombined-stream@1.0.8(transitive)

• + Addedcommander@2.20.3(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addedconcat-stream@1.5.0(transitive)

• + Addedcore-util-is@1.0.21.0.3(transitive)

• + Addedcryptiles@2.0.5(transitive)

• + Addeddashdash@1.14.1(transitive)

• + Addeddebug@0.7.4(transitive)

• + Addeddelayed-stream@1.0.0(transitive)

• + Addedecc-jsbn@0.1.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedextend@3.0.2(transitive)

• + Addedextract-zip@1.5.0(transitive)

• + Addedextsprintf@1.3.0(transitive)

• + Addedfd-slicer@1.0.1(transitive)

• + Addedforever-agent@0.6.1(transitive)

• + Addedform-data@1.0.1(transitive)

• + Addedfs-extra@0.26.7(transitive)

• + Addedfs.realpath@1.0.0(transitive)

• + Addedgenerate-function@2.3.1(transitive)

• + Addedgenerate-object-property@1.2.0(transitive)

• + Addedgetpass@0.1.7(transitive)

• + Addedglob@7.2.3(transitive)

• + Addedgraceful-fs@1.2.34.2.11(transitive)

• + Addedhar-validator@2.0.6(transitive)

• + Addedhas-ansi@2.0.0(transitive)

• + Addedhasha@2.2.0(transitive)

• + Addedhawk@3.1.3(transitive)

• + Addedhoek@2.16.3(transitive)

• + Addedhttp-signature@1.1.1(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedis-my-ip-valid@1.0.1(transitive)

• + Addedis-my-json-valid@2.20.6(transitive)

• + Addedis-property@1.0.2(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedis-typedarray@1.0.0(transitive)

• + Addedisarray@1.0.0(transitive)

• + Addedisexe@2.0.0(transitive)

• + Addedisstream@0.1.2(transitive)

• + Addedjsbn@0.1.1(transitive)

• + Addedjson-schema@0.4.0(transitive)

• + Addedjson-stringify-safe@5.0.1(transitive)

• + Addedjsonfile@2.4.0(transitive)

• + Addedjsonpointer@5.0.1(transitive)

• + Addedjsprim@1.4.2(transitive)

• + Addedkew@0.7.0(transitive)

• + Addedklaw@1.3.1(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedmime-db@1.52.0(transitive)

• + Addedmime-types@2.1.35(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedminimist@0.0.8(transitive)

• + Addedmkdirp@0.5.0(transitive)

• + Addednode-uuid@1.4.8(transitive)

• + Addedoauth-sign@0.8.2(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedosenv@0.0.3(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedpend@1.2.0(transitive)

• + Addedphantomjs@1.9.20(transitive)

• + Addedpinkie@2.0.4(transitive)

• + Addedpinkie-promise@2.0.1(transitive)

• + Addedprocess-nextick-args@1.0.7(transitive)

• + Addedprogress@1.1.8(transitive)

• + Addedqs@5.2.1(transitive)

• + Addedreadable-stream@2.0.6(transitive)

• + Addedrequest@2.67.0(transitive)

• + Addedrequest-progress@2.0.1(transitive)

• + Addedrimraf@2.1.42.7.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsntp@1.0.9(transitive)

• + Addedsshpk@1.18.0(transitive)

• + Addedstring_decoder@0.10.31(transitive)

• + Addedstringstream@0.0.6(transitive)

• + Addedstrip-ansi@3.0.1(transitive)

• + Addedsupports-color@2.0.0(transitive)

• + Addedsvg2png@1.0.1(transitive)

• + Addedtemp@0.6.0(transitive)

• + Addedthrottleit@1.0.1(transitive)

• + Addedtough-cookie@2.2.2(transitive)

• + Addedtunnel-agent@0.4.3(transitive)

• + Addedtweetnacl@0.14.5(transitive)

• + Addedtypedarray@0.0.7(transitive)

• + Addedutil-deprecate@1.0.2(transitive)

• + Addedverror@1.10.0(transitive)

• + Addedwhich@1.2.14(transitive)

• + Addedwrappy@1.0.2(transitive)

• + Addedxml2js@0.4.23(transitive)

• + Addedxmlbuilder@11.0.1(transitive)

• + Addedxtend@4.0.2(transitive)

• + Addedyauzl@2.4.1(transitive)

• - Removedgm@~1.14.2

• - Removedarray-parallel@0.1.3(transitive)

• - Removedarray-series@0.1.5(transitive)

• - Removeddebug@0.7.0(transitive)

• - Removedgm@1.14.2(transitive)

• - Removedstream-to-buffer@0.0.1(transitive)

• - Removedthrough@2.3.8(transitive)