🚀 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-svg-sprite

Package Overview
Dependencies
Maintainers
2
Versions
54
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gulp-svg-sprite - npm Package Compare versions

Comparing version

1.5.0
to
2.0.0

LICENSE

119

index.js

@@ -10,67 +10,84 @@ 'use strict';

* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/gulp-svg-sprite/master/LICENSE.txt
* @license MIT https://github.com/svg-sprite/gulp-svg-sprite/blob/main/LICENSE
*/
var through2 = require('through2'),
PluginError = require('plugin-error'),
SVGSpriter = require('svg-sprite'),
/** @typedef {import('stream').TransformOptions} TransformOptions */
PLUGIN_NAME = 'gulp-svg-sprite';
const { Transform } = require('stream');
const PluginError = require('plugin-error');
const SVGSpriter = require('svg-sprite');
const PLUGIN_NAME = 'gulp-svg-sprite';
/**
* Get a new Transform stream set in Object mode, similar to through2#obj.
* Inspired by [metafizzy/transfob](https://github.com/metafizzy/transfob).
* @param {TransformOptions['transform']} transform
* @param {TransformOptions['flush']} flush
*/
function transfob(transform, flush) {
return new Transform({
flush,
transform,
objectMode: true
});
}
// Extend plugin error
function extendError(pError, error) {
if (error && (typeof error === 'object')) {
for (const property of ['name', 'errno']) {
if (property in error) {
pError[property] = error[property];
}
}
}
return pError;
}
/**
* Plugin level function
*
* @param {Object} config SVGSpriter main configuration
* @param {Object} config SVGSpriter main configuration
*/
function gulpSVGSprite(config) {
// Instanciate spriter instance
const spriter = new SVGSpriter(config);
let shapes = 0;
// Extend plugin error
function extendError(pError, error) {
if (error && (typeof error === 'object')) {
['name', 'errno'].forEach(function(property) {
if (property in error) {
this[property] = error[property];
}
}, pError);
}
// Intercept error log and convert to plugin errors
spriter.config.log.error = function(message, error) {
this.emit('error', extendError(new PluginError(PLUGIN_NAME, message), error));
};
return pError;
}
return transfob((file, encoding, callback) => {
let error = null;
try {
spriter.add(file);
++shapes;
} catch (e) {
error = (!e.plugin || (e.plugin !== PLUGIN_NAME)) ?
extendError(new PluginError(PLUGIN_NAME, e.message), e) :
e;
}
// Instanciate spriter instance
var spriter = new SVGSpriter(config);
var shapes = 0;
return callback(error);
}, function(callback) {
spriter.compile((error, result) => {
if (error) {
this.emit('error', new PluginError(PLUGIN_NAME, error));
} else if (shapes > 0) {
for (const mode of Object.values(result)) {
for (const resource of Object.values(mode)) {
this.push(resource);
}
}
}
// Intercept error log and convert to plugin errors
spriter.config.log.error = function(message, error) {
this.emit('error', extendError(new PluginError(PLUGIN_NAME, message), error));
};
return through2.obj(function (file, enc, cb) {
var error = null;
try {
spriter.add(file);
++shapes;
} catch(e) {
error = (!e.plugin || (e.plugin !== PLUGIN_NAME)) ? extendError(new PluginError(PLUGIN_NAME, e.message), e) : e;
}
return cb(error);
}, function(cb) {
var stream = this;
spriter.compile(function(error, result /*, data*/){
if (error) {
stream.emit('error', new PluginError(PLUGIN_NAME, error));
} else if (shapes > 0) {
for (var mode in result) {
for (var resource in result[mode]) {
stream.push(result[mode][resource]);
}
}
}
cb();
});
});
callback();
});
});
}
module.exports = gulpSVGSprite;
module.exports = gulpSVGSprite;

89

package.json
{
"name": "gulp-svg-sprite",
"description": "SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours",
"version": "1.5.0",
"version": "2.0.0",
"homepage": "https://github.com/jkphl/gulp-svg-sprite",

@@ -16,34 +16,25 @@ "author": "Joschi Kuphal <joschi@kuphal.net> (https://jkphl.is)",

"engines": {
"node": ">= 6.4"
"node": ">=12"
},
"scripts": {
"test": "gulp && istanbul test _mocha --report html -- test/*.js --reporter spec",
"coveralls": "istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- -R spec && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage"
"lint": "xo",
"fix": "xo --fix",
"mocha": "_mocha",
"test": "gulp && npm run mocha"
},
"files": [
"index.js",
"CHANGELOG.md"
"index.js"
],
"dependencies": {
"plugin-error": "^1.0.1",
"svg-sprite": "^1.5.0",
"through2": "^2.0.3"
"svg-sprite": "^2.0.0"
},
"devDependencies": {
"coveralls": "^3.0.2",
"event-stream": "^4.0.0",
"glob": "^7.1.3",
"gulp": "^3.9.1",
"gulp-jshint": "^2.1.0",
"gulp-plumber": "^1.2.0",
"image-diff": "^2.0.0",
"istanbul": "*",
"jshint": "^2.9.6",
"mkdirp": "^0.5.1",
"mocha": "^5.2.0",
"mocha-lcov-reporter": "*",
"pn": "^1.1.0",
"should": "^13.2.3",
"svg2png": "github:jkphl/svg2png",
"vinyl": "^2.2.0"
"glob": "^7.2.3",
"gulp": "^4.0.2",
"looks-same": "^7.3.0",
"mocha": "^9.2.2",
"svg2png": "^4.1.1",
"vinyl": "^2.2.1",
"xo": "^0.50.0"
},

@@ -71,3 +62,51 @@ "keywords": [

"mustache"
]
],
"mocha": {
"check-leaks": true,
"throw-deprecation": true,
"timeout": 5000,
"trace-deprecation": true,
"trace-warnings": true,
"use_strict": true
},
"xo": {
"space": 4,
"rules": {
"arrow-body-style": "off",
"capitalized-comments": "off",
"camelcase": "off",
"comma-dangle": [
"error",
"never"
],
"no-negated-condition": "off",
"object-curly-spacing": [
"error",
"always"
],
"operator-linebreak": [
"error",
"after"
],
"promise/prefer-await-to-then": "off",
"prefer-template": "error",
"space-before-function-paren": [
"error",
"never"
],
"spaced-comment": "off",
"unicorn/catch-error-name": "off",
"unicorn/filename-case": "off",
"unicorn/prefer-module": "off",
"unicorn/prevent-abbreviations": "off"
},
"overrides": [
{
"files": "test/**/*.js",
"envs": [
"mocha"
]
}
]
}
}

230

README.md

@@ -1,18 +0,19 @@

# gulp-svg-sprite [![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Build Status][travis-image]][travis-url] [![Coverage Status][coveralls-image]][coveralls-url] [![Dependency Status][depstat-image]][depstat-url] [![Development Dependency Status][devdepstat-image]][devdepstat-url]
===============
# gulp-svg-sprite
is a Gulp plugin wrapping around [svg-sprite](https://github.com/jkphl/svg-sprite) which **takes a bunch of [SVG](http://www.w3.org/TR/SVG/) files**, optimizes them and bakes them into **SVG sprites** of several types:
[![npm version][npm-image]][npm-url] [![npm downloads][npm-downloads]][npm-url] [![Build Status][ci-image]][ci-url]
* Traditional [CSS sprites](http://en.wikipedia.org/wiki/Sprite_(computer_graphics)#Sprites_by_CSS) for use as background images,
* CSS sprites with **pre-defined `<view>` elements**, useful for foreground images as well,
* inline sprites using the **`<defs>` element**,
* inline sprites using the **`<symbol>` element**
* and [SVG stacks](http://simurai.com/blog/2012/04/02/svg-stacks).
is a Gulp plugin wrapping around [svg-sprite](https://github.com/svg-sprite/svg-sprite) which **takes a bunch of [SVG](https://www.w3.org/TR/SVG/) files**, optimizes them and bakes them into **SVG sprites** of several types:
* Traditional [CSS sprites](https://en.wikipedia.org/wiki/Sprite_(computer_graphics)#Sprites_by_CSS) for use as background images,
* CSS sprites with **pre-defined `<view>` elements**, useful for foreground images as well,
* inline sprites using the **`<defs>` element**,
* inline sprites using the **`<symbol>` element**
* and [SVG stacks](https://simurai.com/blog/2012/04/02/svg-stacks).
## Features & configuration? → [svg-sprite](https://github.com/jkphl/svg-sprite)
This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the [svg-sprite manual](https://github.com/jkphl/svg-sprite).
## Features & configuration? → [svg-sprite](https://github.com/svg-sprite/svg-sprite)
This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the [svg-sprite manual](https://github.com/svg-sprite/svg-sprite).
## Usage

@@ -22,3 +23,3 @@

```shell
```sh
npm install --save-dev gulp-svg-sprite

@@ -29,5 +30,5 @@ ```

```javascript
var gulp = require('gulp'),
svgSprite = require('gulp-svg-sprite');
```js
const gulp = require('gulp');
const svgSprite = require('gulp-svg-sprite');

@@ -47,3 +48,3 @@ gulp.src('path/to/assets/*.svg')

As `options` argument you may provide a [main configuration object](https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md) as described in the *svg-sprite* manual. Configuration-wise, *svg-sprite* and *gulp-svg-sprite* differ only in one respect:
As `options` argument you may provide a [main configuration object](https://github.com/svg-sprite/svg-sprite/blob/main/docs/configuration.md) as described in the *svg-sprite* manual. Configuration-wise, *svg-sprite* and *gulp-svg-sprite* differ only in one respect:

@@ -65,16 +66,15 @@ #### ~~options.dest~~

```javascript
var gulp = require('gulp'),
svgSprite = require('gulp-svg-sprite'),
// Basic configuration example
config = {
mode: {
css: { // Activate the «css» mode
render: {
css: true // Activate CSS output (with default options)
}
```js
const gulp = require('gulp');
const svgSprite = require('gulp-svg-sprite');
// Basic configuration example
const config = {
mode: {
css: { // Activate the «css» mode
render: {
css: true // Activate CSS output (with default options)
}
}
};
}
};

@@ -88,13 +88,39 @@ gulp.src('**/*.svg', { cwd: 'path/to/assets' })

```text
out/
├─ css/
│ ├─ sprite.css
│ ├─ svg/
│ │ ├─ sprite.css-495d2010.svg
```
out
`-- css
|-- sprite.css
`-- svg
`-- sprite.css-495d2010.svg
```
> The cryptical looking part in the SVG's file name is the result of *svg-sprite*'s cache busting feature which is enabled by default for CSS sprites. We'll turn this off in the next example.
#### Gulp 4 basic example
```js
const { src, dest, parallel } = require('gulp');
const svgSprite = require('gulp-svg-sprite');
// Basic configuration example
const svgspriteConfig = {
mode: {
css: { // Activate the «css» mode
render: {
css: true // Activate CSS output (with default options)
}
}
}
};
function buildSvg() {
return src('**/*.svg', { cwd: 'src/assets' })
.pipe(svgSprite(svgspriteConfig))
.pipe(dest('out'));
}
exports.default = parallel(buildSvg);
```
### More complex example

@@ -110,28 +136,27 @@

```javascript
var gulp = require('gulp'),
svgSprite = require('gulp-svg-sprite'),
// More complex configuration example
config = {
shape: {
dimension: { // Set maximum dimensions
maxWidth: 32,
maxHeight: 32
},
spacing: { // Add padding
padding: 10
},
dest: 'out/intermediate-svg' // Keep the intermediate files
```js
const gulp = require('gulp');
const svgSprite = require('gulp-svg-sprite');
// More complex configuration example
const config = {
shape: {
dimension: { // Set maximum dimensions
maxWidth: 32,
maxHeight: 32
},
mode: {
view: { // Activate the «view» mode
bust: false,
render: {
scss: true // Activate Sass output (with default options)
}
},
symbol: true // Activate the «symbol» mode
}
};
spacing: { // Add padding
padding: 10
},
dest: 'out/intermediate-svg' // Keep the intermediate files
},
mode: {
view: { // Activate the «view» mode
bust: false,
render: {
scss: true // Activate Sass output (with default options)
}
},
symbol: true // Activate the «symbol» mode
}
};

@@ -145,16 +170,16 @@ gulp.src('**/*.svg', { cwd: 'path/to/assets' })

```text
out/
├─ intermediate-svg
│ ├─ weather-clear.svg
│ ├─ weather-snow.svg
│ ├─ weather-storm.svg
├─ symbol/
│ ├─ svg/
│ ├─ sprite.symbol.svg
├─ view/
│ ├─ sprite.scss
│ ├─ svg/
│ ├─ sprite.view.svg
```
out
|-- intermediate-svg
| |-- weather-clear.svg
| |-- weather-snow.svg
| `-- weather-storm.svg
|-- symbol
| `-- svg
| `-- sprite.symbol.svg
`-- view
|-- sprite.scss
`-- svg
`-- sprite.view.svg
```

@@ -165,17 +190,17 @@ ### Error handling

```javascript
var gulp = require('gulp'),
svgSprite = require('gulp-svg-sprite'),
plumber = require('gulp-plumber'),
// Basic configuration example
config = {
mode: {
css: {
render: {
css: true
}
```js
const gulp = require('gulp');
const svgSprite = require('gulp-svg-sprite');
const plumber = require('gulp-plumber');
// Basic configuration example
const config = {
mode: {
css: {
render: {
css: true
}
}
};
}
};

@@ -196,34 +221,25 @@ gulp.src('**/*.svg', { cwd: '' })

* [custom transformation](https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#svg-transformations),
* [meta data injection](https://github.com/jkphl/svg-sprite/blob/master/docs/meta-data.md),
* [customizing output templates](https://github.com/jkphl/svg-sprite/blob/master/docs/templating.md) or
* introducing new output formats
* [custom transformation](https://github.com/svg-sprite/svg-sprite/blob/main/docs/configuration.md#svg-transformations),
* [meta data injection](https://github.com/svg-sprite/svg-sprite/blob/main/docs/meta-data.md),
* [customizing output templates](https://github.com/svg-sprite/svg-sprite/blob/main/docs/templating.md) or
* introducing new output formats
please refer to the [svg-sprite manual](https://github.com/jkphl/svg-sprite).
please refer to the [svg-sprite manual](https://github.com/svg-sprite/svg-sprite).
Changelog
---------
## Changelog
Please refer to the [changelog](CHANGELOG.md) for a complete release history.
Please refer to the [GitHub releases](https://github.com/svg-sprite/gulp-svg-sprite/releases) for a complete release history.
Legal
-----
Copyright © 2018 Joschi Kuphal <joschi@kuphal.net> / [@jkphl](https://twitter.com/jkphl). *svg-sprite* is licensed under the terms of the [MIT license](LICENSE.txt). The contained example SVG icons are part of the [Tango Icon Library](http://tango.freedesktop.org/Tango_Icon_Library) and belong to the Public Domain.
## Legal
Copyright © 2018 Joschi Kuphal <joschi@kuphal.net> / [@jkphl](https://twitter.com/jkphl). *svg-sprite* is licensed under the terms of the [MIT license](LICENSE). The contained example SVG icons are part of the [Tango Icon Library](http://tango.freedesktop.org/Tango_Icon_Library) and belong to the Public Domain.
[npm-url]: https://npmjs.org/package/gulp-svg-sprite
[npm-image]: https://badge.fury.io/js/gulp-svg-sprite.png
[npm-downloads]: https://img.shields.io/npm/dm/gulp-svg-sprite.svg
[travis-url]: http://travis-ci.org/jkphl/gulp-svg-sprite
[travis-image]: https://secure.travis-ci.org/jkphl/gulp-svg-sprite.png
[npm-url]: https://www.npmjs.com/package/gulp-svg-sprite
[npm-image]: https://img.shields.io/npm/v/gulp-svg-sprite
[npm-downloads]: https://img.shields.io/npm/dm/gulp-svg-sprite
[coveralls-url]: https://coveralls.io/r/jkphl/gulp-svg-sprite
[coveralls-image]: https://img.shields.io/coveralls/jkphl/gulp-svg-sprite.svg
[depstat-url]: https://david-dm.org/jkphl/gulp-svg-sprite
[depstat-image]: https://david-dm.org/jkphl/gulp-svg-sprite.svg
[devdepstat-url]: https://david-dm.org/jkphl/gulp-svg-sprite#info=devDependencies
[devdepstat-image]: https://david-dm.org/jkphl/gulp-svg-sprite/dev-status.svg
[ci-url]: https://github.com/svg-sprite/gulp-svg-sprite/actions?query=workflow%3ATests+branch%3Amain
[ci-image]: https://img.shields.io/github/workflow/status/svg-sprite/gulp-svg-sprite/Tests/main?label=CI&logo=github
CHANGELOG.md
LICENSE.txt