gulp-svgstore - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

gulpfile.js

@@ -42,5 +42,2 @@ var svgstore = require('./index')
     .pipe(svgstore({ inlineSvg: true }))
-    .pipe(cheerio(function ($) {
-      $('svg').attr('style', 'display:none')
-    }))
 
@@ -47,0 +44,0 @@ return gulp

index.js

@@ -15,3 +15,3 @@ var cheerio = require('cheerio')
 
-  var resultSvg = '<svg xmlns="http://www.w3.org/2000/svg" />'
+  var resultSvg = '<svg xmlns="http://www.w3.org/2000/svg" ><defs/></svg>'
   if (!inlineSvg) {
@@ -27,2 +27,3 @@ resultSvg =
   var $combinedSvg = $('svg')
+  var $combinedDefs = $('defs')
 
@@ -70,2 +71,8 @@ return through2.obj(
 
+      var $defs = file.cheerio('defs')
+      if ($defs.length > 0) {
+        $combinedDefs.append($defs.contents())
+        $defs.remove()
+      }
+
       $symbol.append($svg.contents())
@@ -78,2 +85,5 @@ $combinedSvg.append($symbol)
       if (isEmpty) return cb()
+      if ($combinedDefs.contents().length === 0) {
+        $combinedDefs.remove()
+      }
       var file = new gutil.File({ path: fileName, contents: new Buffer($.xml()) })
@@ -80,0 +90,0 @@ file.cheerio = $

package.json

 {
   "name": "gulp-svgstore",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Combine svg files into one with <symbol> elements",
@@ -23,14 +23,11 @@ "main": "index.js",
   "dependencies": {
+    "cheerio": "0.*",
     "gulp-util": "^3.0.0",
     "through2": "^0.4.1"
   },
-  "peerDependencies": {
-    "cheerio": "0.*"
-  },
   "devDependencies": {
-    "cheerio": "0.*",
     "connect": "^3.1.0",
     "gm": "^1.16.0",
     "gulp": "^3.6.2",
-    "gulp-cheerio": "^0.4.0",
+    "gulp-cheerio": "^0.6.2",
     "gulp-inject": "^1.0.1",
@@ -37,0 +34,0 @@ "gulp-mocha": "^0.5.2",

README.md

@@ -50,4 +50,12 @@ gulp-svgstore
 The following gulp task will inject svg into
-`<!-- inject:svg --><!-- endinject -->` placeholder of test/src/inline-svg.html.
 
+In your html file:
+
+```html
+<div style="height: 0; width: 0; position: absolute; visibility: hidden">
+  <!-- inject:svg --><!-- endinject -->
+</div>
+```
+In your gulp tasks:
+
 ```js
@@ -89,3 +97,3 @@ var gulp = require('gulp');
         .src('src/svg/**/*.svg', { base: 'src/svg' })
-        .pipe(rename({prefix: 'icon-'})
+        .pipe(rename({prefix: 'icon-'}))
         .pipe(svgstore())
@@ -154,3 +162,3 @@ .pipe(gulp.dest('dest'));
             parserOptions: { xmlMode: true }
-        })
+        }))
         .pipe(svgstore({ inlineSvg: true })
@@ -164,3 +172,6 @@ .pipe(gulp.dest('test/dest'));
 The following example sets `style="display:none"` on the combined svg:
+(beware if you use gradients and masks, display:none breaks those and just show
+nothing, best method is to use the [method show above](#inlining-svgstore-result-into-html-body) )
 
+
 ```js
@@ -176,3 +187,3 @@ var gulp = require('gulp');
         .pipe(cheerio(function ($) {
-            $('svg').attr('style', 'display:none');
+            $('svg').attr('style',  'display:none');
         }))
@@ -221,2 +232,5 @@ .pipe(gulp.dest('test/dest'));
 
+* 5.0.1
+  * Removed cheerio from devDependencies #34
+
 * 5.0.0
@@ -223,0 +237,0 @@ * Removed prefix and fileName options

test.js

@@ -187,2 +187,31 @@ /* global describe, it, before, after */
 
+  it('should merge defs to parent svg file', function (done) {
+
+    var stream = svgstore({ inlineSvg: true })
+
+    stream.on('data', function(file){
+      var result = file.contents.toString()
+      var target =
+        '<svg xmlns="http://www.w3.org/2000/svg">' +
+        '<defs><circle id="circ" cx="2" cy="2" r="1"/></defs>' +
+        '<symbol id="circle" viewBox="0 0 4 4"/>' +
+        '</svg>'
+      assert.equal( result, target )
+      done()
+    })
+
+    stream.write(new gutil.File({
+      contents: new Buffer(
+        '<svg viewBox="0 0 4 4">' +
+        '<defs><circle id="circ" cx="2" cy="2" r="1"/></svg></defs>' +
+        '<circle cx="2" cy="2" r="1"/>' +
+        '</svg>'
+      )
+    , path: 'circle.svg'
+    }))
+
+    stream.end()
+
+  })
+
   it('should emit error if files have the same name', function (done) {
@@ -193,3 +222,3 @@
       stream.on('error', function (error) {
-        assert.ok(error instanceof gutil.PluginError);
+        assert.ok(error instanceof gutil.PluginError)
         assert.equal(error.message, 'File name should be unique: circle')
@@ -196,0 +225,0 @@ done()

No alert changes

Improved metrics

Total package byte prevSize

22928

increased by9.59%

Dev dependency count

9

decreased by-10%

Number of package files

13

increased by8.33%

Lines of code

338

increased by9.39%

Number of lines in readme file

257

increased by5.76%

Dependency changes

• + Addedcheerio@0.*