gulp-svgstore - npm Package Compare versions

Comparing version 4.0.3 to 5.0.0

gulpfile.js

@@ -21,3 +21,3 @@ var svgstore = require('./index')
     }))
-    .pipe(svgstore({ fileName: 'icons.svg', prefix: 'icon-' }))
+    .pipe(svgstore())
     .pipe(gulp.dest('test/dest'))
@@ -42,3 +42,3 @@
     }))
-    .pipe(svgstore({ prefix: 'icon-', inlineSvg: true }))
+    .pipe(svgstore({ inlineSvg: true }))
     .pipe(cheerio(function ($) {
@@ -45,0 +45,0 @@ $('svg').attr('style', 'display:none')

index.js

@@ -11,4 +11,3 @@ var cheerio = require('cheerio')
   var isEmpty = true
-  var prefix = config.prefix || ''
-  var fileName = config.fileName || 'svgstore.svg'
+  var fileName
   var inlineSvg = config.inlineSvg || false
@@ -42,3 +41,3 @@ var ids = {}
       var $svg = file.cheerio('svg')
-      var idAttr = prefix + path.basename(file.relative, path.extname(file.relative))
+      var idAttr = path.basename(file.relative, path.extname(file.relative))
       var viewBoxAttr = $svg.attr('viewBox')
@@ -53,2 +52,11 @@ var $symbol = $('<symbol/>')
 
+      if (!fileName) {
+        fileName = path.basename(file.base)
+        if (fileName === '.' || !fileName) {
+          fileName = 'svgstore.svg'
+        } else {
+          fileName = fileName.split(path.sep).shift() + '.svg'
+        }
+      }
+
       if (file && isEmpty) {
@@ -55,0 +63,0 @@ isEmpty = false

package.json

 {
   "name": "gulp-svgstore",
-  "version": "4.0.3",
+  "version": "5.0.0",
   "description": "Combine svg files into one with <symbol> elements",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -13,10 +13,19 @@ gulp-svgstore
 
-* fileName — the name of result file, default: 'svgstore.svg'
-* prefix *(deprecated, please use gulp-rename)* — prefix for ids of the <symbol> elements, default: ''
-* inlineSvg — output only `<svg>` element without `<?xml ?>` and `DOCTYPE` to use inline, default: false
+The following options are set automatically based on file data:
 
+* `id` attribute of the `<symbol>` element is set to the name of corresponding file;
+* result filename is the name of base directory of the first file.
+
+If your workflow is different, please use `gulp-rename` to rename sources or result.
+
+The only available option is:
+
+* inlineSvg — output only `<svg>` element without `<?xml ?>` and `DOCTYPE` to use inline, default: `false`.
+
 ## Usage
 
-The following script will combine circle.svg and square.svg into single svg file with
-`<symbol>` elements. Additionally pass through [gulp-svgmin](https://github.com/ben-eb/gulp-svgmin)
+The following script will combine all svg sources into single svg file with `<symbol>` elements.
+The name of result svg is the base directory name of the first file `src.svg`.
+
+Additionally pass through [gulp-svgmin](https://github.com/ben-eb/gulp-svgmin)
 to minimize svg payload size.
@@ -33,3 +42,3 @@
         .pipe(svgmin())
-        .pipe(svgstore({ fileName: 'icons.svg', prefix: 'icon-' }))
+        .pipe(svgstore())
         .pipe(gulp.dest('test/dest'));
@@ -53,3 +62,3 @@ });
         .src('test/src/*.svg')
-        .pipe(svgstore({ prefix: 'icon-', inlineSvg: true }));
+        .pipe(svgstore({ inlineSvg: true }));
 
@@ -67,9 +76,25 @@ function fileContents (filePath, file) {
 
-### Generating complex id attributes
+### Generating id attributes
 
 Id of symbol element is calculated from file name. You cannot pass files with the same name,
-because id should be unique. If you need to have nested directories that may have files with
-the same name, please use `gulp-rename`.
+because id should be unique.
 
-The following example will concatenate relative path with the name of the file,
+If you need to add prefix to each id, please use `gulp-rename`:
+
+```js
+var gulp = require('gulp');
+var rename = require('gulp-rename');
+var svgstore = require('gulp-svgstore');
+
+gulp.task('default', function () {
+    return gulp
+        .src('src/svg/**/*.svg', { base: 'src/svg' })
+        .pipe(rename({prefix: 'icon-'})
+        .pipe(svgstore())
+        .pipe(gulp.dest('dest'));
+});
+```
+
+If you need to have nested directories that may have files with the same name, please
+use `gulp-rename`. The following example will concatenate relative path with the name of the file,
 e.g. `src/svg/one/two/three/circle.svg` becomes `one-two-three-circle`.
@@ -84,10 +109,11 @@
 gulp.task('default', function () {
-  return gulp.src('src/svg/**/*.svg', { base: 'src/svg' })
-    .pipe(rename(function (path) {
-      var name = path.dirname.split('/');
-      name.push(path.basename);
-      path.basename = name.join('-');
-    }))
-    .pipe(svgstore())
-    .pipe(gulp.dest('dest'));
+    return gulp
+        .src('src/svg/**/*.svg', { base: 'src/svg' })
+        .pipe(rename(function (path) {
+            var name = path.dirname.split(path.sep);
+            name.push(path.basename);
+            path.basename = name.join('-');
+        }))
+        .pipe(svgstore())
+        .pipe(gulp.dest('dest'));
 });
@@ -195,2 +221,5 @@ ```
 
+* 5.0.0
+  * Removed prefix and fileName options
+
 * 4.0.3
@@ -197,0 +226,0 @@ * Ensure unique file names

test.js

@@ -204,4 +204,52 @@ /* global describe, it, before, after */
 
+  it('should generate result filename based on base path of the first file', function (done) {
 
+      var stream = svgstore()
 
+      stream.on('data', function (file) {
+        assert.equal(file.relative, 'icons.svg')
+        done()
+      })
+
+      stream.write(new gutil.File({
+        contents: new Buffer('<svg/>')
+      , path: 'src/icons/circle.svg'
+      , base: 'src/icons'
+      }))
+
+      stream.write(new gutil.File({
+        contents: new Buffer('<svg/>')
+      , path: 'src2/icons2/square.svg'
+      , base: 'src2/icons2'
+      }))
+
+      stream.end()
+
+  })
+
+  it('should generate svgstore.svg if base path of the 1st file is dot', function (done) {
+
+      var stream = svgstore()
+
+      stream.on('data', function (file) {
+        assert.equal(file.relative, 'svgstore.svg')
+        done()
+      })
+
+      stream.write(new gutil.File({
+        contents: new Buffer('<svg/>')
+      , path: 'circle.svg'
+      , base: '.'
+      }))
+
+      stream.write(new gutil.File({
+        contents: new Buffer('<svg/>')
+      , path: 'src2/icons2/square.svg'
+      , base: 'src2'
+      }))
+
+      stream.end()
+
+  })
+
 })

No alert changes

Improved metrics

Total package byte prevSize

20921

increased by9.87%

Lines of code

309

increased by16.17%

Number of lines in readme file

243

increased by13.55%

No dependency changes