🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

gulp-svgstore

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gulp-svgstore - npm Package Compare versions

Comparing version

4.0.3
to
5.0.0

4

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')

14

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

2

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",

67

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

48

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()
})
})
test/src/inline-svg.html

Sorry, the diff of this file is not supported yet