grunt-svgstore - npm Package Compare versions

Comparing version 0.3.6 to 0.4.0

Gruntfile.js

@@ -111,3 +111,3 @@ /*
         files: {
-          'tmp/cutnameafterfirstdot.svg': ['test/fixtures/naming/*']
+          'tmp/cutnameafterfirstdot.svg': ['test/fixtures/naming/name.min.svg']
         }
@@ -134,2 +134,12 @@ },
 
+      cleanupwithinheritviewbox: {
+        options: {
+          cleanup: true,
+          inheritviewbox: true
+        },
+        files: {
+          'tmp/cleanup_with_inheritviewbox.svg': ['test/fixtures/cleanup.svg']
+        }
+      },
+
       removeunreferencedids: {
@@ -231,2 +241,13 @@ options: {
       },
+
+      withCustomIdFunction: {
+        options: {
+          convertNameToId: function(name) {
+            return name.split('_')[1];
+          }
+        },
+        files: {
+          'tmp/customIdFunction.svg': ['test/fixtures/naming/SomePrefix_iconName.svg']
+        }
+      }
     },
@@ -233,0 +254,0 @@

package.json

 {
   "name": "grunt-svgstore",
   "description": "Merge SVGs from a folder.",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "homepage": "https://github.com/FWeinb/grunt-svgstore",
@@ -6,0 +6,0 @@ "author": {

README.md

@@ -81,3 +81,2 @@ # grunt-svgstore [![NPM version](https://badge.fury.io/js/grunt-svgstore.svg)](http://badge.fury.io/js/grunt-svgstore) [![Build Status](https://travis-ci.org/FWeinb/grunt-svgstore.svg?branch=master)](https://travis-ci.org/FWeinb/grunt-svgstore)
 
-
 #### options.formatting (since 0.0.4)
@@ -151,5 +150,5 @@ Type: `Object` or `boolean`
 
-Clean up all inline style definitions that may jeopardise later stylesheet-based colouring (`fill`).
-Apart from true / false, the value of this property can be an array of attributes. 
-All attributes in the array are removed from all elements in the SVG.
+This option can be used to clean up inline definitions that may jeopardise later CSS-based styles.  
+When set to true clean up all inline `style` attributes.  
+Apart from true / false, the value of this property can be an array of inline attributes ( like `fill`, `stroke`, ...) you want to remove from the elements in the SVG.
 
@@ -162,4 +161,70 @@ #### options.cleanupdefs (since 0.3.0)
 
+#### options.inheritviewbox (since 0.4.0)
+Type: `boolean`  
+Default value: `false`
 
+By default, each generated `<symbol>` will only automatically have a `viewBox`
+attribute set if the original source SVG file for that symbol has a `viewBox`.
 
+When `inheritviewbox` is set to `true`, if the source SVG has no `viewBox` but
+it *does* have a pixel-based `width` and `height`, then the `<symbol>`
+`viewBox` will be derived using those values instead.
+
+For example, with `inheritviewbox: true`,
+
+```svg
+<svg width="256" height="128">
+```
+
+will result in:
+
+```svg
+<symbol viewBox="0 0 256 128" ...>
+```
+
+#### options.convertNameToId (since 0.4.0)
+Type: `function`
+
+The function used to generate the ID from the file name. The function receives the file name without the `.svg` extension as its only argument.
+
+The default implementation:
+```js
+function(name) {
+  var dotPos = name.indexOf('.');
+  if ( dotPos > -1){
+    name = name.substring(0, dotPos);
+  }
+  return name;
+}
+```
+
+#### options.fixedSizeVersion (Since 0.4.0)
+Type: `Object` or `boolean`
+Default value: `false`
+
+When `true` or a configuration object is passed for each of the symbols another one, with suffixed id generated.
+All those additional symbols have the common dimensions and refers to the original symbols with `<use>`.
+Original symbols are placed exactly in the middle of the fixed-size viewBox of the fixed size version.
+
+Configuration reference and default values if `true` is passed:
+```js
+grunt.initConfig({
+  svgstore: {
+    options: {
+      fixedSizeVersion: {
+        width: 50,
+        height: 50,
+        suffix: '-fixed-size',
+        maxDigits: {
+          translation: 4,
+          scale: 4,
+        },
+      },
+    },
+  },
+});
+```
+
+Any of the configuration object properties may be omitted.
+
 ### Usage Examples
@@ -195,2 +260,8 @@
 
+#### 0.4.0
+
+  * Generate fixed sized reference based copies of symbols (See [#58](https://github.com/FWeinb/grunt-svgstore/pull/58))
+  * Add a way to inherit the viewbox form the source svg (See [#66](https://github.com/FWeinb/grunt-svgstore/pull/66))
+  * Expose `convertNameToId` option to customize how ids are derived from file names. (See [#68](https://github.com/FWeinb/grunt-svgstore/pull/68))
+
 #### 0.3.6
@@ -197,0 +268,0 @@

tasks/svgstore.js

@@ -20,14 +20,2 @@ /*
 
-  var md5 = function (str) {
-    return crypto.createHash('md5').update(str).digest('hex');
-  };
-
-  var convertNameToId = function( name ){
-    var dotPos = name.indexOf('.');
-    if ( dotPos > -1){
-      name = name.substring(0, dotPos);
-    }
-    return name;
-  };
-
   // Matching an url() reference. To correct references broken by making ids unique to the source svg
@@ -62,2 +50,11 @@ var urlPattern = /url\(\s*#([^ ]+?)\s*\)/g;
 
+  // Default function used to extract an id from a name
+  var defaultConvertNameToId = function(name) {
+    var dotPos = name.indexOf('.');
+    if ( dotPos > -1){
+      name = name.substring(0, dotPos);
+    }
+    return name;
+  };
+
   // Please see the Grunt documentation for more information regarding task
@@ -73,6 +70,9 @@ // creation: http://gruntjs.com/creating-tasks
       },
+      symbol: {},
       formatting: false,
       includedemo: false,
-      symbol: {},
-      cleanupdefs: false
+      inheritviewbox: false,
+      cleanupdefs: false,
+      convertNameToId: defaultConvertNameToId,
+      fixedSizeVersion: false
     });
@@ -109,2 +109,3 @@
         var filename = path.basename(filepath, '.svg');
+        var id = options.convertNameToId(filename);
         var contentStr = grunt.file.read(filepath);
@@ -126,10 +127,5 @@ var $ = cheerio.load(contentStr, {
         var mappedIds = {};
-        var uniqueId;
 
         function getUniqueId(oldId) {
-          if (!uniqueId) {
-            uniqueId = md5(contentStr);
-          }
-
-          return 'svgstore' + uniqueId + oldId;
+          return id + "-" + oldId;
         }
@@ -218,4 +214,2 @@
 
-        var id = convertNameToId(filename);
-
         // If there is no title use the filename
@@ -242,4 +236,14 @@ title = title || id;
 
-        // Add viewBox (if present on SVG)
+        // Add viewBox (if present on SVG w/ optional width/height fallback)
         var viewBox = $svg.attr('viewBox');
+
+        if (!viewBox && options.inheritviewbox) {
+          var width = $svg.attr('width');
+          var height = $svg.attr('height');
+          var pxSize = /^\d+(\.\d+)?(px)?$/;
+          if (pxSize.test(width) && pxSize.test(height)) {
+            viewBox = '0 0 ' + parseFloat(width) + ' ' + parseFloat(height);
+          }
+        }
+
         if (viewBox) {
@@ -274,2 +278,50 @@ $symbol.attr('viewBox', viewBox);
         }
+
+        if (viewBox && !!options.fixedSizeVersion) {
+          var fixedWidth = options.fixedSizeVersion.width || 50;
+          var fixedHeight = options.fixedSizeVersion.width || 50;
+          var $resFixed = cheerio.load('<symbol><use></use></symbol>', { lowerCaseAttributeNames: false });
+          var fixedId = graphicId + (options.fixedSizeVersion.suffix || '-fixed-size');
+          var $symbolFixed = $resFixed('symbol')
+            .first()
+            .attr('viewBox', [0, 0, fixedWidth, fixedHeight].join(' '))
+            .attr('id', fixedId);
+          Object.keys(options.symbol).forEach(function (key) {
+            $symbolFixed.attr(key, options.symbol[key]);
+          });
+          if (desc) {
+            $symbolFixed.prepend('<desc>' + desc + '</desc>');
+          }
+          if (title) {
+            $symbolFixed.prepend('<title>' + title + '</title>');
+          }
+          var originalViewBox = viewBox
+            .split(' ')
+            .map(function (string) {
+              return parseInt(string);
+            });
+
+          var translationX = ((fixedWidth - originalViewBox[2]) / 2) + originalViewBox[0];
+          var translationY = ((fixedHeight - originalViewBox[3]) / 2) + originalViewBox[1];
+          var scale = Math.max.apply(null, [originalViewBox[2], originalViewBox[3]]) /
+            Math.max.apply(null, [fixedWidth, fixedHeight]);
+
+          $symbolFixed
+            .find('use')
+            .attr('xlink:href', '#' + fixedId)
+            .attr('transform', [
+              'scale(' + parseFloat(scale.toFixed(options.fixedSizeVersion.maxDigits.scale || 4)).toPrecision() + ')',
+              'translate(' + [
+                parseFloat(translationX.toFixed(options.fixedSizeVersion.maxDigits.translation || 4)).toPrecision(),
+                parseFloat(translationY.toFixed(options.fixedSizeVersion.maxDigits.translation || 4)).toPrecision()
+              ].join(', ') + ')'
+            ].join(' '));
+
+          $resultSvg.append($resFixed.html());
+          if (options.includedemo) {
+            iconNameViewBoxArray.push({
+              name: fixedId
+            });
+          }
+        }
       });
@@ -276,0 +328,0 @@

test/svgstore_test.js

@@ -174,2 +174,12 @@ 'use strict';
 
+  cleanup_with_inheritviewbox: function(test) {
+    test.expect(1);
+
+    var actual = grunt.file.read('tmp/cleanup_with_inheritviewbox.svg');
+    var expected = grunt.file.read('test/expected/cleanup_with_inheritviewbox.svg');
+    test.equal(actual, expected, 'viewBox may use width/height of SVG if inheritviewbox enabled');
+
+    test.done();
+  },
+
   with_cleanupdefs: function(test) {
@@ -236,21 +246,31 @@ test.expect(1);
   customTemplateFunction: function(test) {
-      test.expect(1);
+    test.expect(1);
 
-      var actual = grunt.file.read('tmp/customTemplateFunction-demo.html');
-      var expected = grunt.file.read('test/expected/customTemplateFunction-demo.html');
+    var actual = grunt.file.read('tmp/customTemplateFunction-demo.html');
+    var expected = grunt.file.read('test/expected/customTemplateFunction-demo.html');
 
-      // This way the comparison stays immune to whitespace changes.
-      var minificationOptions = {
-        collapseWhitespace: true,
-        minifyCSS: true
-      };
+    // This way the comparison stays immune to whitespace changes.
+    var minificationOptions = {
+      collapseWhitespace: true,
+      minifyCSS: true
+    };
 
-      test.equal(
-          minify(actual, minificationOptions),
-          minify(expected, minificationOptions),
-          'should have created a valid demo html'
-      );
-      test.done();
-    }
+    test.equal(
+        minify(actual, minificationOptions),
+        minify(expected, minificationOptions),
+        'should have created a valid demo html'
+    );
+    test.done();
+  },
 
+  customIdFunction: function(test) {
+    test.expect(1);
+
+    var actual = grunt.file.read('tmp/customIdFunction.svg');
+    var expected = grunt.file.read('test/expected/customIdFunction.svg');
+
+    test.equal(actual, expected, 'Symbol ID should not contain prefix');
+    test.done();
+  }
+
 };

No alert changes

Improved metrics

Total package byte prevSize

136280

increased by4.25%

Number of package files

53

increased by6%

Lines of code

745

increased by12.37%

Number of lines in readme file

344

increased by26.01%

No dependency changes