Socket
Socket
Sign inDemoInstall

svg-sprite

Package Overview
Dependencies
274
Maintainers
1
Versions
96
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.3.7 to 1.4.0

13

bin/svg-sprite.js

@@ -9,3 +9,3 @@ #!/usr/bin/env node

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -249,7 +249,3 @@ */

var arg = mode + '-render-' + render;
if ((render in this) && !argv[arg]
&& (!(mode in JSONConfig.mode)
|| !('render' in JSONConfig.mode[mode])
|| !(render in JSONConfig.mode[mode].render))
) {
if ((render in this) && !argv[arg] && (!(mode in JSONConfig.mode) || !('render' in JSONConfig.mode[mode]) || !(render in JSONConfig.mode[mode].render))) {
delete this[render];

@@ -267,6 +263,3 @@ }

var example = mode + '-example';
if (!argv[example]
&& (!(mode in JSONConfig.mode) || !('example' in JSONConfig.mode[mode]))
&& ('example' in config.mode[mode])
) {
if (!argv[example] && (!(mode in JSONConfig.mode) || !('example' in JSONConfig.mode[mode])) && ('example' in config.mode[mode])) {
delete config.mode[mode].example;

@@ -273,0 +266,0 @@ }

13

CHANGELOG.md

@@ -0,5 +1,14 @@

## 1.4.0 Maintenance release (2018-03-17)
* Added more Node.js versions to Travis instructions
* Updated dependencies
* Updated SVGO version & test fixture ([#258](https://github.com/jkphl/svg-sprite/pull/258), [#259](https://github.com/jkphl/svg-sprite/issues/259))
* Reformatted documentation code examples ([#236](https://github.com/jkphl/svg-sprite/pull/236))
* Fix JSHint errors ([#261](https://github.com/jkphl/svg-sprite/pull/261))
* Add support for simple shape ID generator ([#240](https://github.com/jkphl/svg-sprite/pull/240))
* Add failing CPU detection workaround ([#252](https://github.com/jkphl/svg-sprite/issues/252))
* Changed SVGO plugin defaults ([#249](https://github.com/jkphl/svg-sprite/issues/249))
## 1.3.7 Bugfix release (2017-06-01)
**This is going to be the final release in the 1.x line (except someone encounters some severe issues).**
* Updated dependencies

@@ -6,0 +15,0 @@ * Fixed invalid markup in `<defs>` example html ([#229](https://github.com/jkphl/svg-sprite/issues/229))

192

docs/api.md

@@ -24,19 +24,19 @@ svg-sprite [![NPM version][npm-image]][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]

var SVGSpriter = require('svg-sprite'),
mkdirp = require('mkdirp'),
path = require('path'),
fs = require('fs'),
var SVGSpriter = require('svg-sprite'),
mkdirp = require('mkdirp'),
path = require('path'),
fs = require('fs'),
// 1. Create and configure a spriter instance
// ====================================================================
spriter = new SVGSpriter({
dest : 'out', // Main output directory
mode :
css : { // Create a CSS sprite
render : {
css : true // Render a CSS stylesheet
}
}
}
});
spriter = new SVGSpriter({
dest: 'out', // Main output directory
mode: {
css: { // Create a CSS sprite
render: {
css: true // Render a CSS stylesheet
}
}
}
});

@@ -46,13 +46,13 @@ // 2. Add some SVG files to process

spriter.add(
path.resolve('assets/example-1.svg'),
'example-1.svg',
fs.readFileSync('assets/example-1.svg', {encoding: 'utf-8'})
path.resolve('assets/example-1.svg'),
'example-1.svg',
fs.readFileSync('assets/example-1.svg', { encoding: 'utf-8' })
);
/* ... */
/* ... */
spriter.add(
path.resolve('assets/example-x.svg'),
'example-x.svg',
fs.readFileSync('assets/example-x.svg', {encoding: 'utf-8'})
path.resolve('assets/example-x.svg'),
'example-x.svg',
fs.readFileSync('assets/example-x.svg', { encoding: 'utf-8' })
);

@@ -62,13 +62,13 @@

// ====================================================================
spriter.compile(function(error, result, data){
spriter.compile(function (error, result, data) {
// Run through all files that have been created for the `css` mode
for (var type in result.css) {
// Recursively create directories as needed
mkdirp.sync(path.dirname(result.css[type].path));
// Write the generated resource to disk
fs.writeFileSync(result.css[type].path, result.css[type].contents);
}
// Run through all files that have been created for the `css` mode
for (var type in result.css) {
// Recursively create directories as needed
mkdirp.sync(path.dirname(result.css[type].path));
// Write the generated resource to disk
fs.writeFileSync(result.css[type].path, result.css[type].contents);
}
});

@@ -102,38 +102,38 @@ ```

var SVGSpriter = require('svg-sprite'),
mkdirp = require('mkdirp'),
path = require('path'),
fs = require('fs'),
File = require('vinyl'),
glob = require('glob'),
spriter = new SVGSpriter({
dest : 'out',
mode : {
css : {
render : {
css : true
}
}
}
}),
cwd = path.resolve('assets');
var SVGSpriter = require('svg-sprite'),
mkdirp = require('mkdirp'),
path = require('path'),
fs = require('fs'),
File = require('vinyl'),
glob = require('glob'),
spriter = new SVGSpriter({
dest: 'out',
mode: {
css: {
render: {
css: true
}
}
}
}),
cwd = path.resolve('assets');
// Find SVG files recursively via `glob`
glob.glob('**/*.svg', {cwd: cwd}, function(err, files) {
files.forEach(function(file){
// Create and add a vinyl file instance for each SVG
spriter.add(new File({
path: path.join(cwd, file), // Absolute path to the SVG file
base: cwd, // Base path (see `name` argument)
contents: fs.readFileSync(path.join(cwd, file)) // SVG file contents
}));
})
spriter.compile(function(error, result, data){
for (var type in result.css) {
mkdirp.sync(path.dirname(result.css[type].path));
fs.writeFileSync(result.css[type].path, result.css[type].contents);
}
});
glob.glob('**/*.svg', { cwd: cwd }, function (err, files) {
files.forEach(function (file) {
// Create and add a vinyl file instance for each SVG
spriter.add(new File({
path: path.join(cwd, file), // Absolute path to the SVG file
base: cwd, // Base path (see `name` argument)
contents: fs.readFileSync(path.join(cwd, file)) // SVG file contents
}));
})
spriter.compile(function (error, result, data) {
for (var type in result.css) {
mkdirp.sync(path.dirname(result.css[type].path));
fs.writeFileSync(result.css[type].path, result.css[type].contents);
}
});
});

@@ -150,5 +150,5 @@ ```

2. **callback** `{Function}` — Callback triggered when the compilation has finished, getting three arguments:
* **error** `{Error}` — Error message in case the compilation has failed
* **result** `{Object}` — Directory of generated resources ([see below](#compilation-example))
* **data** `{Object}` — Templating variables passed to Mustache for rendering the resources (see [sprite & shape variables](templating.md#sprite--shape-variables) for details)
* **error** `{Error}` — Error message in case the compilation has failed
* **result** `{Object}` — Directory of generated resources ([see below](#compilation-example))
* **data** `{Object}` — Templating variables passed to Mustache for rendering the resources (see [sprite & shape variables](templating.md#sprite--shape-variables) for details)

@@ -160,13 +160,15 @@ ##### Compilation example

```javascript
spriter.compile({
css : {
render : {
scss : true
},
example : true
}
},
function(error, result, data){
console.log(result);
});
spriter.compile(
{
css: {
render: {
scss: true
},
example: true
}
},
function (error, result, data) {
console.log(result);
}
);
```

@@ -178,7 +180,7 @@

{
css : {
sprite : <File "css/svg/sprite.css.svg" <Buffer 3c 3f 78 ...>>,
scss : <File "css/sprite.scss" <Buffer 2e 73 76 ...>>,
example : <File "css/sprite.css.html" <Buffer 3c 21 44 ...>>
}
css: {
sprite: <File "css/svg/sprite.css.svg" <Buffer 3c 3f 78 ...>>,
scss: <File "css/sprite.scss" <Buffer 2e 73 76 ...>>,
example: <File "css/sprite.css.html" <Buffer 3c 21 44 ...>>
}
}

@@ -199,4 +201,4 @@ ```

2. **callback** `{Function}`: Callback triggered when the shapes are available, getting called with two arguments:
* **error** `{Error}` — Error message in case the shape access has failed.
* **result** `{Array}` — Array of [vinyl](https://github.com/wearefractal/vinyl) carrying the intermediate SVGs.
* **error** `{Error}` — Error message in case the shape access has failed.
* **result** `{Array}` — Array of [vinyl](https://github.com/wearefractal/vinyl) carrying the intermediate SVGs.

@@ -206,11 +208,11 @@ ##### Shape access example

```javascript
var mkdirp = require('mkdirp'),
path = require('path'),
fs = require('fs');
var mkdirp = require('mkdirp'),
path = require('path'),
fs = require('fs');
spriter.getShapes(path.resolve('tmp/svg'), function(error, result) {
result.forEach(function(file){
mkdirp.sync(path.dirname(file.path));
fs.writeFileSync(file.path, file.contents);
});
spriter.getShapes(path.resolve('tmp/svg'), function (error, result) {
result.forEach(function (file) {
mkdirp.sync(path.dirname(file.path));
fs.writeFileSync(file.path, file.contents);
});
});

@@ -232,2 +234,2 @@ ```

[devdepstat-url]: https://david-dm.org/jkphl/svg-sprite#info=devDependencies
[devdepstat-image]: https://david-dm.org/jkphl/svg-sprite/dev-status.svg
[devdepstat-image]: https://david-dm.org/jkphl/svg-sprite/dev-status.svg

290

docs/configuration.md

@@ -14,8 +14,8 @@ svg-sprite [![NPM version][npm-image]][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]

{
dest : <String>, // Main output directory
log : <String|Logger>, // Logging verbosity or custom logger
shape : <Object>, // SVG shape configuration
svg : <Object>, // Sprite SVG options
variables : <Object>, // Custom templating variables
mode : <Object> // Output mode configurations
dest: <String>, // Main output directory
log: <String|Logger>, // Logging verbosity or custom logger
shape: <Object>, // SVG shape configuration
svg: <Object>, // Sprite SVG options
variables: <Object>, // Custom templating variables
mode: <Object> // Output mode configurations
}

@@ -33,22 +33,22 @@ ```

* [SVG shape configuration](#svg-shape-configuration)
* [Shape IDs](#shape-ids)
* [Shape dimensions](#shape-dimensions)
* [Shape spacing](#shape-spacing)
* [Shape transformations](#shape-transformations)
* [Pre-defined shape transformations](#pre-defined-shape-transformations-string-values)
* [Custom shape transformations](#custom-shape-transformations-object-values)
* [Pre-defined shape transformation with custom configuration](#pre-defined-shape-transformation-with-custom-configuration-object-values)
* [Custom callback transformation](#custom-callback-transformation-function-values)
* [Miscellaneous shape options](#miscellaneous-shape-options)
* [Shape IDs](#shape-ids)
* [Shape dimensions](#shape-dimensions)
* [Shape spacing](#shape-spacing)
* [Shape transformations](#shape-transformations)
* [Pre-defined shape transformations](#pre-defined-shape-transformations-string-values)
* [Custom shape transformations](#custom-shape-transformations-object-values)
* [Pre-defined shape transformation with custom configuration](#pre-defined-shape-transformation-with-custom-configuration-object-values)
* [Custom callback transformation](#custom-callback-transformation-function-values)
* [Miscellaneous shape options](#miscellaneous-shape-options)
* [Sprite SVG options](#sprite-svg-options)
* [SVG sprite customization](#svg-sprite-customization)
* [SVG sprite customization](#svg-sprite-customization)
* [Custom templating variables](#custom-templating-variables)
* [Output modes](#output-modes)
* [Enabling & configuring](#enabling--configuring)
* [Common mode properties](#common-mode-properties)
* [Specific mode properties](#specific-mode-properties)
* [«css» & «view» mode](#css--view-mode)
* [«defs» & «symbol» mode](#defs--symbol-mode)
* [«stack» mode](#stack-mode)
* [Rendering configurations](#rendering-configurations)
* [Enabling & configuring](#enabling--configuring)
* [Common mode properties](#common-mode-properties)
* [Specific mode properties](#specific-mode-properties)
* [«css» & «view» mode](#css--view-mode)
* [«defs» & «symbol» mode](#defs--symbol-mode)
* [«stack» mode](#stack-mode)
* [Rendering configurations](#rendering-configurations)

@@ -75,24 +75,24 @@

```javascript
shape : {
id : { // SVG shape ID related options
separator : '--', // Separator for directory name traversal
generator : function() { /*...*/ }, // SVG shape ID generator callback
pseudo : '~', // File name separator for shape states (e.g. ':hover')
whitespace : '_' // Whitespace replacement for shape IDs
shape: {
id: { // SVG shape ID related options
separator: '--', // Separator for directory name traversal
generator: function() { /*...*/ }, // SVG shape ID generator callback
pseudo: '~', // File name separator for shape states (e.g. ':hover')
whitespace: '_' // Whitespace replacement for shape IDs
},
dimension : { // Dimension related options
maxWidth : 2000, // Max. shape width
maxHeight : 2000, // Max. shape height
precision : 2, // Floating point precision
attributes : false, // Width and height attributes on embedded shapes
dimension: { // Dimension related options
maxWidth: 2000, // Max. shape width
maxHeight: 2000, // Max. shape height
precision: 2, // Floating point precision
attributes: false, // Width and height attributes on embedded shapes
},
spacing : { // Spacing related options
padding : 0, // Padding around all shapes
box : 'content' // Padding strategy (similar to CSS `box-sizing`)
spacing: { // Spacing related options
padding: 0, // Padding around all shapes
box: 'content' // Padding strategy (similar to CSS `box-sizing`)
},
transform : ['svgo'], // List of transformations / optimizations
sort : function() { /*...*/ }, // SVG shape sorting callback
meta : null, // Path to YAML file with meta / accessibility data
align : null, // Path to YAML file with extended alignment data
dest : null // Output directory for optimized intermediate SVG shapes
transform: ['svgo'], // List of transformations / optimizations
sort: function() { /*...*/ }, // SVG shape sorting callback
meta: null, // Path to YAML file with meta / accessibility data
align: null, // Path to YAML file with extended alignment data
dest: null // Output directory for optimized intermediate SVG shapes
}

@@ -106,3 +106,3 @@ ```

-------------------------| --------------- | ------------- | ------------------------------------------ |
`shape.id.separator` | String | `"--"` | Separator for traversing a directory structure into a shape ID |
`shape.id.separator` | String | `"--"` | Separator for traversing a directory structure into a shape ID. Im empty, no directory traversal will happen and only the file name part (without the parent directory names) will be considered for the shape ID. |
`shape.id.generator` | Function∣String | See desc. | Callback for translating the local part of a shape's file name into a shape ID. The callback's signature is `function(name, file) { /* ... */ return id; }`, where `name` is the relative path of the source file within the base directory and `file` the original [vinyl](https://github.com/wearefractal/vinyl) file object. By default, the file extension `".svg"` is stripped off the `name` value and directory structures are traversed using the `id.separator` as replacement for the directory separator. You may also provide a template string (e.g. `"icon-%s"`), in which case the placeholder `"%s"` gets substituted with the traversed local file name. If the string doesn't contain any placeholder, it is used as a prefix to the local file name. |

@@ -142,6 +142,6 @@ `shape.id.pseudo` | String | `"~"` | String separator for pseudo CSS classes in file names. Example: `my-icon.svg` and `my-icon~hover.svg` for an icon with a regular and a `:hover` state. |

{
shape : {
transform : ['svgo']
/* ... */
}
shape: {
transform: ['svgo']
/* ... */
}
}

@@ -157,8 +157,8 @@ ```

{
shape : {
transform : [
{svgo : {}}
]
/* ... */
}
shape: {
transform: [
{svgo: {}}
]
/* ... */
}
}

@@ -182,13 +182,13 @@ ```

{
shape : {
transform : [
{svgo : {
plugins : [
{transformsWithOnePath: true},
{moveGroupAttrsToElems: false}
]
}}
]
/* ... */
}
shape: {
transform: [
{svgo: {
plugins: [
{transformsWithOnePath: true},
{moveGroupAttrsToElems: false}
]
}}
]
/* ... */
}
}

@@ -204,22 +204,22 @@ ```

{
shape : {
transform : [
{custom :
shape: {
transform: [
{custom:
/**
* Custom callback transformation
*
* @param {SVGShape} shape SVG shape object
* @param {SVGSpriter} spriter SVG spriter
* @param {Function} callback Callback
* @return {void}
*/
function(shape, sprite, callback) {
/* ... */
callback(null);
}
}
]
/* ... */
}
/**
* Custom callback transformation
*
* @param {SVGShape} shape SVG shape object
* @param {SVGSpriter} spriter SVG spriter
* @param {Function} callback Callback
* @return {void}
*/
function(shape, sprite, callback) {
/* ... */
callback(null);
}
}
]
/* ... */
}
}

@@ -264,18 +264,18 @@ ```

{
svg : {
transform : [
/**
* Custom sprite SVG transformation
*
* @param {String} svg Sprite SVG
* @return {String} Processed SVG
*/
function(svg) {
/* ... */
return svg;
},
svg: {
transform: [
/**
* Custom sprite SVG transformation
*
* @param {String} svg Sprite SVG
* @return {String} Processed SVG
*/
function(svg) {
/* ... */
return svg;
},
/* ... */
]
}
/* ... */
]
}
}

@@ -293,10 +293,10 @@ ```

{
variables : {
now : +new Date(),
png : function() {
return function(sprite, render) {
return render(sprite).split('.svg').join('.png');
}
}
}
variables: {
now: +new Date(),
png: function() {
return function(sprite, render) {
return render(sprite).split('.svg').join('.png');
}
}
}
}

@@ -328,5 +328,5 @@ ```

{
mode : {
css : true
}
mode: {
css: true
}
}

@@ -336,5 +336,5 @@

{
mode : {
css : {}
}
mode: {
css: {}
}
}

@@ -348,10 +348,10 @@ ```

{
mode : {
sprite1 : {
mode : 'css' // Sprite with «css» mode
},
sprite2 : {
mode : 'css' // Another sprite with «css» mode
}
}
mode: {
sprite1: {
mode: 'css' // Sprite with «css» mode
},
sprite2: {
mode: 'css' // Another sprite with «css» mode
}
}
}

@@ -428,7 +428,7 @@ ```

{
mode : {
css : {
example : true
}
}
mode: {
css: {
example: true
}
}
}

@@ -441,7 +441,7 @@ ```

{
mode : {
css : {
example : {}
}
}
mode: {
css: {
example: {}
}
}
}

@@ -454,12 +454,12 @@ ```

{
mode : {
css : {
render : {
css : {
template : 'path/to/template.html', // relative to current working directory
dest : 'path/to/demo.html' // relative to current output directory
}
}
}
}
mode: {
css: {
render: {
css: {
template: 'path/to/template.html', // relative to current working directory
dest: 'path/to/demo.html' // relative to current output directory
}
}
}
}
}

@@ -472,7 +472,7 @@ ```

{
mode : {
css : {
example : false
}
}
mode: {
css: {
example: false
}
}
}

@@ -479,0 +479,0 @@ ```

32

docs/grunt-gulp.md

@@ -15,12 +15,12 @@ svg-sprite [![NPM version][npm-image]][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]

// Create spriter instance
var spriter = new SVGSpriter(config);
var spriter = new SVGSpriter(config);
// Add SVG source files — the manual way ...
spriter.add('assets/svg-1.svg', null, fs.readFileSync('assets/svg-1.svg', {encoding: 'utf-8'}));
spriter.add('assets/svg-2.svg', null, fs.readFileSync('assets/svg-2.svg', {encoding: 'utf-8'}));
/* ... */
spriter.add('assets/svg-1.svg', null, fs.readFileSync('assets/svg-1.svg', { encoding: 'utf-8' }));
spriter.add('assets/svg-2.svg', null, fs.readFileSync('assets/svg-2.svg', { encoding: 'utf-8' }));
/* ... */
// Compile sprite
spriter.compile(function(error, result) {
/* ... Write `result` files to disk or do whatever with them ... */
spriter.compile(function (error, result) {
/* ... Write `result` files to disk or do whatever with them ... */
});

@@ -35,9 +35,9 @@ ```

grunt.initConfig({
svg_sprite : {
minimal : {
src : ['assets/**/*.svg'],
dest : 'out',
options : config
},
},
svg_sprite: {
minimal: {
src: ['assets/**/*.svg'],
dest: 'out',
options: config
},
},
});

@@ -52,4 +52,4 @@ ```

gulp.src('assets/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest('out'));
.pipe(svgSprite(config))
.pipe(gulp.dest('out'));
```

@@ -70,2 +70,2 @@

[devdepstat-url]: https://david-dm.org/jkphl/svg-sprite#info=devDependencies
[devdepstat-image]: https://david-dm.org/jkphl/svg-sprite/dev-status.svg
[devdepstat-image]: https://david-dm.org/jkphl/svg-sprite/dev-status.svg

20

docs/meta-data.md

@@ -17,9 +17,9 @@ svg-sprite [![NPM version][npm-image]][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]

```yaml
"path/to/rectangle.svg" :
title : Green rectangle
description : A light green rectangle with rounded corners and a dark green border
"path/to/rectangle.svg":
title: "Green rectangle"
description: "A light green rectangle with rounded corners and a dark green border"
path--to--circle :
title : Red circle
description : A red circle with a black border
path--to--circle:
title: "Red circle"
description: "A red circle with a black border"
```

@@ -38,5 +38,5 @@

<svg aria-labelledby="title desc">
<title id="title">Green rectangle</title>
<desc id="desc">A light green rectangle with rounded corners and a dark green border</desc>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
<title id="title">Green rectangle</title>
<desc id="desc">A light green rectangle with rounded corners and a dark green border</desc>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

@@ -60,2 +60,2 @@ ```

[devdepstat-url]: https://david-dm.org/jkphl/svg-sprite#info=devDependencies
[devdepstat-image]: https://david-dm.org/jkphl/svg-sprite/dev-status.svg
[devdepstat-image]: https://david-dm.org/jkphl/svg-sprite/dev-status.svg

26

docs/shape-alignment.md

@@ -18,3 +18,3 @@ svg-sprite [![NPM version][npm-image]][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]

<shape-ID-or-path>:
<template-string-with-placeholder>: <positioning>
<template-string-with-placeholder>: <positioning>
```

@@ -29,4 +29,4 @@

```yaml
"*" :
"%s" : 0
"*":
"%s": 0
```

@@ -39,4 +39,4 @@

```yaml
"*" :
"%s" : .5
"*":
"%s": .5
```

@@ -53,11 +53,11 @@

```yaml
"*" :
"%s" : .5
"*":
"%s": .5
weather-clear :
-left : 0
-right : 1
weather-clear:
-left: 0
-right: 1
weather-storm :
"%s" : 0
weather-storm:
"%s": 0
```

@@ -84,2 +84,2 @@

[devdepstat-url]: https://david-dm.org/jkphl/svg-sprite#info=devDependencies
[devdepstat-image]: https://david-dm.org/jkphl/svg-sprite/dev-status.svg
[devdepstat-image]: https://david-dm.org/jkphl/svg-sprite/dev-status.svg

322

docs/templating.md

@@ -16,160 +16,160 @@ svg-sprite [![NPM version][npm-image]][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]

{
// Data object for the `mymode` output key
mymode : {
// Name of the current output mode
mode : 'css',
// Key used for result files & data
key : 'mymode',
// Indicator whether a `common` CSS class name has been specified
hasCommon : false,
// Given CSS class name for `common` sprite shape properties (NULL if disabled)
common : null,
// Effective `common` CSS class / mixin name (identical to `common`, defaulting to 'svg-common' if disabled)
commonName : 'svg-common',
// Indicator whether a `mixin` name has been specified
hasMixin : false,
// Mixin name for common sprite shape properties (NULL if disabled)
mixinName : null,
// Whether to create shape dimensioning CSS rules
includeDimensions : true,
// Padding added to each shape (pixel)
padding : {top: 30, right: 30, bottom: 30, left: 30},
// Overall sprite width (pixel)
spriteWidth : 860,
// Overall sprite height (pixel)
spriteHeight : 1020,
// Relative path from the stylesheet resource to the SVG sprite
sprite : 'svg/sprite.css.svg',
// Relative path from the example resource to the SVG sprite (if configured)
example : 'svg/sprite.css.svg'
// List of all shapes in the sprite
shapes : [
// Single shape properties
{
// Shape name (possibly including state, e.g. "weather-clear-night~hover")
name : 'weather-clear-night',
// Shape name excluding the state
base : 'weather-clear-night',
// Shape width (pixel)
width : {
// Excluding padding
inner : 800,
// Including padding
outer : 860
},
// Shape height (pixel)
height : {
// Excluding padding
inner : 960,
// Including padding
outer : 1020
},
// First shape in the sprite
first : true,
// Last shape in the sprite
last : false,
// Shape position within the sprite
position : {
// Absolute position (pixel)
absolute : {
// Horizontal position
x : 0,
// Horizontal position
y : -120,
// Compound position
xy : '0 -120px'
},
// Relative position (%)
relative : {
// Horizontal position
x : 0,
// Vertical position
y : 33.333333,
// Compound position
xy : '0 33.333333%'
}
},
// CSS selectors
selector : {
// Shape positioning CSS rule
shape : [
{
expression : '.svg-weather-clear-night',
raw : '.svg-weather-clear-night',
first : true, // First selector expression
last : false
},
{
expression : '.svg-weather-clear-night\\:regular',
raw : '.svg-weather-clear-night:regular', // Unescaped version
first : false,
last : true // Last selector expression
}
],
// Shape dimensioning CSS rule
dimensions : [
{
expression : '.svg-weather-clear-night-dims',
raw : '.svg-weather-clear-night-dims',
first : true, // First selector expression
last : true // Last selector expression
}
]
},
// Dimensioning rule strategy
dimensions : {
// Render dimensions as part of positioning rule
inline : false,
// Render dimensions as separate dimensioning rule
extra : true
},
// Shape SVG (inline embeddable version)
svg : '<svg> ... </svg>',
}
],
// Current date (RFC-1123)
date : 'Fri, 26 Dec 2014 12:06:55 GMT',
}
// Data object for the `mymode` output key
mymode: {
// Name of the current output mode
mode: 'css',
// Key used for result files & data
key: 'mymode',
// Indicator whether a `common` CSS class name has been specified
hasCommon: false,
// Given CSS class name for `common` sprite shape properties (NULL if disabled)
common: null,
// Effective `common` CSS class / mixin name (identical to `common`, defaulting to 'svg-common' if disabled)
commonName: 'svg-common',
// Indicator whether a `mixin` name has been specified
hasMixin: false,
// Mixin name for common sprite shape properties (NULL if disabled)
mixinName: null,
// Whether to create shape dimensioning CSS rules
includeDimensions: true,
// Padding added to each shape (pixel)
padding: {top: 30, right: 30, bottom: 30, left: 30},
// Overall sprite width (pixel)
spriteWidth: 860,
// Overall sprite height (pixel)
spriteHeight: 1020,
// Relative path from the stylesheet resource to the SVG sprite
sprite: 'svg/sprite.css.svg',
// Relative path from the example resource to the SVG sprite (if configured)
example: 'svg/sprite.css.svg'
// List of all shapes in the sprite
shapes: [
// Single shape properties
{
// Shape name (possibly including state, e.g. "weather-clear-night~hover")
name: 'weather-clear-night',
// Shape name excluding the state
base: 'weather-clear-night',
// Shape width (pixel)
width: {
// Excluding padding
inner: 800,
// Including padding
outer: 860
},
// Shape height (pixel)
height: {
// Excluding padding
inner: 960,
// Including padding
outer: 1020
},
// First shape in the sprite
first: true,
// Last shape in the sprite
last: false,
// Shape position within the sprite
position: {
// Absolute position (pixel)
absolute: {
// Horizontal position
x: 0,
// Horizontal position
y: -120,
// Compound position
xy: '0 -120px'
},
// Relative position (%)
relative: {
// Horizontal position
x: 0,
// Vertical position
y: 33.333333,
// Compound position
xy: '0 33.333333%'
}
},
// CSS selectors
selector: {
// Shape positioning CSS rule
shape: [
{
expression: '.svg-weather-clear-night',
raw: '.svg-weather-clear-night',
first: true, // First selector expression
last: false
},
{
expression: '.svg-weather-clear-night\\:regular',
raw: '.svg-weather-clear-night:regular', // Unescaped version
first: false,
last: true // Last selector expression
}
],
// Shape dimensioning CSS rule
dimensions: [
{
expression: '.svg-weather-clear-night-dims',
raw: '.svg-weather-clear-night-dims',
first: true, // First selector expression
last: true // Last selector expression
}
]
},
// Dimensioning rule strategy
dimensions: {
// Render dimensions as part of positioning rule
inline: false,
// Render dimensions as separate dimensioning rule
extra: true
},
// Shape SVG (inline embeddable version)
svg: '<svg> ... </svg>',
}
],
// Current date (RFC-1123)
date: 'Fri, 26 Dec 2014 12:06:55 GMT',
}
}

@@ -197,3 +197,3 @@ ```

.offset-background {
background-position: {{#invert}}{{positionX}}{{/invert}}px {{#invert}}{{positionY}}{{/invert}}px;
background-position: {{#invert}}{{positionX}}{{/invert}}px {{#invert}}{{positionY}}{{/invert}}px;
}

@@ -222,3 +222,3 @@ ```

{{#escape}}{{selector-with-backslash}}{{/escape}} {
color: red;
color: red;
}

@@ -240,2 +240,2 @@ ```

[devdepstat-url]: https://david-dm.org/jkphl/svg-sprite#info=devDependencies
[devdepstat-image]: https://david-dm.org/jkphl/svg-sprite/dev-status.svg
[devdepstat-image]: https://david-dm.org/jkphl/svg-sprite/dev-status.svg

419

lib/svg-sprite.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE.txt

@@ -34,23 +34,24 @@ */

function SVGSpriter(config) {
this.config = new CONFIG(config);
this._queue = new QUEUE(this);
this._shapes = [];
this._shapeTransformers = { svgo: SVGO };
this._compileQueue = [];
this._shapesDest = [];
this.config = new CONFIG(config);
this._queue = new QUEUE(this);
this._shapes = [];
this._shapeTransformers = { svgo: SVGO };
this._compileQueue = [];
this._shapesDest = [];
if (typeof os.cpus() === 'undefined') {
this._limit = 2;
this.info('Can\'t detect number of CPUs, falling back to 2');
} else {
this._limit = os.cpus().length * 2;
}
// Detect the number of CPUs
if (typeof os.cpus() === 'undefined') {
this._limit = 2;
this.info('Can\'t detect number of CPUs, falling back to 2');
} else {
this._limit = os.cpus().length * 2;
}
events.EventEmitter.call(this);
events.EventEmitter.call(this);
this._queue.on('empty', this._compile.bind(this));
this._queue.on('empty', this._getShapes.bind(this));
this.on('compiled', this._compile.bind(this));
this._queue.on('empty', this._compile.bind(this));
this._queue.on('empty', this._getShapes.bind(this));
this.on('compiled', this._compile.bind(this));
this.info('Created spriter instance');
this.info('Created spriter instance');
}

@@ -90,57 +91,57 @@

// If no vinyl file object has been given
if (!this._isVinylFile(file)) {
file = _.trim(file);
// If no vinyl file object has been given
if (!this._isVinylFile(file)) {
file = _.trim(file);
var error = null;
// If the name part of the file path is absolute
if (name && path.isAbsolute(name)) {
error = util.format('SVGSpriter.add: "%s" is not a valid relative file name', name);
// If the name part of the file path is absolute
if (name && path.isAbsolute(name)) {
error = util.format('SVGSpriter.add: "%s" is not a valid relative file name', name);
// Else
} else {
name = _.trimStart(_.trim(name), path.sep + '.') || path.basename(file);
svg = _.trim(svg);
// Else
} else {
name = _.trimStart(_.trim(name), path.sep + '.') || path.basename(file);
svg = _.trim(svg);
// Argument validation
var error = null;
if (arguments.length < 3) {
error = 'SVGSpriter.add: You must provide 3 arguments';
}
if (!file.length) {
error = util.format('SVGSpriter.add: "%s" is not a valid absolute file name', file);
}
if (!name.length) {
error = util.format('SVGSpriter.add: "%s" is not a valid relative file name', name);
}
if (!svg.length) {
error = 'SVGSpriter.add: You must provide SVG contents';
}
if (file.substr(-name.length) !== name) {
error = util.format('SVGSpriter.add: "%s" is not the local part of "%s"', name, file);
}
}
// Argument validation
if (arguments.length < 3) {
error = 'SVGSpriter.add: You must provide 3 arguments';
}
if (!file.length) {
error = util.format('SVGSpriter.add: "%s" is not a valid absolute file name', file);
}
if (!name.length) {
error = util.format('SVGSpriter.add: "%s" is not a valid relative file name', name);
}
if (!svg.length) {
error = 'SVGSpriter.add: You must provide SVG contents';
}
if (file.substr(-name.length) !== name) {
error = util.format('SVGSpriter.add: "%s" is not the local part of "%s"', name, file);
}
}
// In case of an error: Throw it!
if (error) {
var e = new Error(error);
e.name = 'ArgumentError';
e.errno = 1419945903;
this.error(error, e);
throw e;
}
// In case of an error: Throw it!
if (error) {
var e = new Error(error);
e.name = 'ArgumentError';
e.errno = 1419945903;
this.error(error, e);
throw e;
}
// Instanciate a vinyl file
file = new File({
base: file.substring(0, file.length - name.length),
path: file,
contents: new Buffer(svg)
});
}
// Instanciate a vinyl file
file = new File({
base: file.substring(0, file.length - name.length),
path: file,
contents: new Buffer(svg)
});
}
file.base = path.resolve(file.base);
file.base = path.resolve(file.base);
// Add the shape to the internal processing queue
this._queue.add(file);
// Add the shape to the internal processing queue
this._queue.add(file);
return this;
return this;
};

@@ -157,5 +158,5 @@

SVGSpriter.prototype._isVinylFile = function (file) {
return _.isObject(file) && ((file instanceof File) || ((file.constructor.name === 'File') && (['path', 'contents', 'relative'].filter(function (property) {
return property in this;
}, file).length === 3)));
return _.isObject(file) && ((file instanceof File) || ((file.constructor.name === 'File') && (['path', 'contents', 'relative'].filter(function (property) {
return property in this;
}, file).length === 3)));
};

@@ -170,37 +171,37 @@

SVGSpriter.prototype._transformShape = function (shape, cb) {
var tasks = [],
that = this,
createTransformTask = function (transform) {
var tasks = [],
that = this,
createTransformTask = function (transform) {
// If it's a custom transformer
if (_.isFunction(transform[1])) {
return function () {
transform[1](shape, that, arguments[arguments.length - 1]);
};
// If it's a custom transformer
if (_.isFunction(transform[1])) {
return function () {
transform[1](shape, that, arguments[arguments.length - 1]);
};
// Else if it's a registered transformer
} else if ((transform[0] in that._shapeTransformers) && _.isObject(transform[1])) {
return function () {
that._shapeTransformers[transform[0]](shape, transform[1], that, arguments[arguments.length - 1]);
};
// Else if it's a registered transformer
} else if ((transform[0] in that._shapeTransformers) && _.isObject(transform[1])) {
return function () {
that._shapeTransformers[transform[0]](shape, transform[1], that, arguments[arguments.length - 1]);
};
// Else: Break
} else {
return null;
}
// Else: Break
} else {
return null;
}
};
};
// Run through all configured transforms
for (var t = 0, task; t < this.config.shape.transform.length; ++t) {
task = createTransformTask(this.config.shape.transform[t]);
// Run through all configured transforms
for (var t = 0, task; t < this.config.shape.transform.length; ++t) {
task = createTransformTask(this.config.shape.transform[t]);
if (task) {
tasks.push(task);
}
}
if (task) {
tasks.push(task);
}
}
async.waterfall(tasks, function (error) {
cb(error);
});
async.waterfall(tasks, function (error) {
cb(error);
});
};

@@ -215,11 +216,11 @@

SVGSpriter.prototype.compile = function () {
var args = _.toArray(arguments),
config = _.isPlainObject(args[0]) ? this.config.filter(args.shift()) : _.clone(this.config.mode, true),
cb = _.isFunction(args[0]) ? args.shift() : function (error) {
throw error;
};
var args = _.toArray(arguments),
config = _.isPlainObject(args[0]) ? this.config.filter(args.shift()) : _.clone(this.config.mode, true),
cb = _.isFunction(args[0]) ? args.shift() : function (error) {
throw error;
};
// Schedule a compilation run
this._compileQueue.push([config, cb]);
this._compile();
// Schedule a compilation run
this._compileQueue.push([config, cb]);
this._compile();
};

@@ -232,61 +233,61 @@

// If the shape queue is not currently active
if (!this._queue.active && this._compileQueue.length) {
var that = this;
var args = this._compileQueue.shift();
// If the shape queue is not currently active
if (!this._queue.active && this._compileQueue.length) {
var that = this;
var args = this._compileQueue.shift();
// If this is a modeless run
if (args[0] === {}) {
var files = {};
// If this is a modeless run
if (args[0] === {}) {
var files = {};
// Add intermediate SVG files
if (that.config.shape.dest) {
files.shapes = that._getShapeFiles(that.config.shape.dest);
that.verbose('Returning %d intermediate SVG files', files.shapes.length);
}
// Add intermediate SVG files
if (that.config.shape.dest) {
files.shapes = that._getShapeFiles(that.config.shape.dest);
that.verbose('Returning %d intermediate SVG files', files.shapes.length);
}
that._logStats(files);
args[1](null, files, {});
that._logStats(files);
args[1](null, files, {});
// Else
} else {
var masterShapes = _.reject(this._shapes, function (shape) {
return !!shape.master;
}).length;
this.info('Compiling %d shapes ...', masterShapes);
// Else
} else {
var masterShapes = _.reject(this._shapes, function (shape) {
return !!shape.master;
}).length;
this.info('Compiling %d shapes ...', masterShapes);
// Initialize the namespace powers
while (!this._namespacePow.length || (Math.pow(26, this._namespacePow.length) < masterShapes)) {
this._namespacePow.unshift(Math.pow(26, this._namespacePow.length));
_.invoke(this._shapes, 'resetNamespace');
}
// Initialize the namespace powers
while (!this._namespacePow.length || (Math.pow(26, this._namespacePow.length) < masterShapes)) {
this._namespacePow.unshift(Math.pow(26, this._namespacePow.length));
_.invoke(this._shapes, 'resetNamespace');
}
// Sort shapes by ID
this._shapes = this._shapes.sort(this.config.shape.sort);
// Sort shapes by ID
this._shapes = this._shapes.sort(this.config.shape.sort);
// Set the shape namespaces on all master shapes
_.reject(this._shapes, function (shape) {
return !!shape.master;
}).map(function (shape, index) {
shape.setNamespace(this._indexNamespace(index));
}, this);
// Set the shape namespaces on all master shapes
_.reject(this._shapes, function (shape) {
return !!shape.master;
}).map(function (shape, index) {
shape.setNamespace(this._indexNamespace(index));
}, this);
this._layout(args[0], function (error, files, data) {
this._layout(args[0], function (error, files, data) {
// Add intermediate SVG files
if (that.config.shape.dest) {
files.shapes = that._getShapeFiles(that.config.shape.dest);
that.verbose('Returning %d intermediate SVG files', files.shapes.length);
}
that.info('Finished %s sprite compilation', _.keys(data).map(function (mode) {
return '«' + mode + '»';
}).join(' + '));
// Add intermediate SVG files
if (that.config.shape.dest) {
files.shapes = that._getShapeFiles(that.config.shape.dest);
that.verbose('Returning %d intermediate SVG files', files.shapes.length);
}
that.info('Finished %s sprite compilation', _.keys(data).map(function (mode) {
return '«' + mode + '»';
}).join(' + '));
that._logStats(files);
that._logStats(files);
args[1](error, files, data);
that.emit('compiled');
});
}
}
args[1](error, files, data);
that.emit('compiled');
});
}
}
};

@@ -301,8 +302,8 @@

SVGSpriter.prototype._indexNamespace = function (index) {
for (var ns = '', n = 0, c; n < this._namespacePow.length; ++n) {
c = Math.floor(index / this._namespacePow[n]);
ns += String.fromCharCode(97 + c);
index -= c * this._namespacePow[n];
}
return ns;
for (var ns = '', n = 0, c; n < this._namespacePow.length; ++n) {
c = Math.floor(index / this._namespacePow[n]);
ns += String.fromCharCode(97 + c);
index -= c * this._namespacePow[n];
}
return ns;
};

@@ -317,18 +318,18 @@

SVGSpriter.prototype._layout = function (config, cb) {
var tasks = [],
files = {},
layout = new LAYOUTER(this, config),
createLayoutTask = function (k, m) {
return function (_cb) {
layout.layout(files, k, m, _cb);
};
};
var tasks = [],
files = {},
layout = new LAYOUTER(this, config),
createLayoutTask = function (k, m) {
return function (_cb) {
layout.layout(files, k, m, _cb);
};
};
for (var mode in config) {
tasks.push(createLayoutTask(mode, config[mode].mode));
}
for (var mode in config) {
tasks.push(createLayoutTask(mode, config[mode].mode));
}
async.parallelLimit(tasks, os.cpus().length * 2, function (error, data) {
cb(error, files, _.zipObject(pluck(data, 'key'), data));
});
async.parallelLimit(tasks, this._limit, function (error, data) {
cb(error, files, _.zipObject(pluck(data, 'key'), data));
});
};

@@ -343,4 +344,4 @@

SVGSpriter.prototype.getShapes = function (dest, cb) {
this._shapesDest.push([dest, cb]);
this._getShapes();
this._shapesDest.push([dest, cb]);
this._getShapes();
};

@@ -353,9 +354,9 @@

// If the shape queue is not currently active
if (!this._queue.active) {
while (this._shapesDest.length) {
var args = this._shapesDest.shift();
args[1](null, this._getShapeFiles(args[0]));
}
}
// If the shape queue is not currently active
if (!this._queue.active) {
while (this._shapesDest.length) {
var args = this._shapesDest.shift();
args[1](null, this._getShapeFiles(args[0]));
}
}
};

@@ -370,9 +371,9 @@

SVGSpriter.prototype._getShapeFiles = function (dest) {
return this._shapes.map(function (shape) {
return new File({
base: this.config.dest,
path: path.join(dest, shape.id + '.svg'),
contents: new Buffer(shape.getSVG(false))
});
}, this);
return this._shapes.map(function (shape) {
return new File({
base: this.config.dest,
path: path.join(dest, shape.id + '.svg'),
contents: new Buffer(shape.getSVG(false))
});
}, this);
};

@@ -386,19 +387,19 @@

SVGSpriter.prototype._logStats = function (files) {
var sizes = {},
exts = {};
for (var mode in files) {
for (var resource in files[mode]) {
var file = files[mode][resource].relative,
ext = path.extname(files[mode][resource].path).toUpperCase();
exts[ext] = (exts[ext] || 0) + 1;
sizes[file] = pretty(files[mode][resource].contents.length);
}
}
this.info('Created ' + _.toPairs(exts).map(function (ext) {
return ext[1] + ' x ' + ext[0].substr(1);
}).join(', '));
var sizes = {},
exts = {};
for (var mode in files) {
for (var resource in files[mode]) {
var file = files[mode][resource].relative,
ext = path.extname(files[mode][resource].path).toUpperCase();
exts[ext] = (exts[ext] || 0) + 1;
sizes[file] = pretty(files[mode][resource].contents.length);
}
}
this.info('Created ' + _.toPairs(exts).map(function (ext) {
return ext[1] + ' x ' + ext[0].substr(1);
}).join(', '));
Object.keys(sizes).sort().forEach(function (file) {
this.verbose('Created %s: %s', file, sizes[file]);
}, this);
Object.keys(sizes).sort().forEach(function (file) {
this.verbose('Created %s: %s', file, sizes[file]);
}, this);
};

@@ -410,3 +411,3 @@

SVGSpriter.prototype.info = function () {
this.config.log.info.apply(this.config.log, arguments);
this.config.log.info.apply(this.config.log, arguments);
};

@@ -418,3 +419,3 @@

SVGSpriter.prototype.verbose = function () {
this.config.log.verbose.apply(this.config.log, arguments);
this.config.log.verbose.apply(this.config.log, arguments);
};

@@ -426,3 +427,3 @@

SVGSpriter.prototype.debug = function () {
this.config.log.debug.apply(this.config.log, arguments);
this.config.log.debug.apply(this.config.log, arguments);
};

@@ -434,3 +435,3 @@

SVGSpriter.prototype.error = function () {
this.config.log.error.apply(this.config.log, arguments);
this.config.log.error.apply(this.config.log, arguments);
};

@@ -445,3 +446,3 @@

module.exports = function (config) {
return new SVGSpriter(config || {});
return new SVGSpriter(config || {});
};

2

lib/svg-sprite/config.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -12,0 +12,0 @@ */

2

lib/svg-sprite/layouter.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -12,0 +12,0 @@ */

3

lib/svg-sprite/mode/base.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -19,3 +19,2 @@ */

mustache = require('mustache'),
os = require('os'),
File = require('vinyl'),

@@ -22,0 +21,0 @@ crypto = require('crypto');

2

lib/svg-sprite/mode/css.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -12,0 +12,0 @@ */

2

lib/svg-sprite/mode/css/packer.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -12,0 +12,0 @@ */

2

lib/svg-sprite/mode/defs.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -12,0 +12,0 @@ */

24

lib/svg-sprite/mode/stack.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -21,3 +21,3 @@ */

* SVG stack
*
*
* @param {SVGSpriter} spriter SVG spriter

@@ -34,4 +34,4 @@ * @param {Object} config Configuration

* Prototype
*
* @type {Object}
*
* @type {Object}
*/

@@ -45,3 +45,3 @@ SVGSpriteStack.prototype = _.create(SVGSpriteStandalone.prototype, {

* Initialization (non-CSS modes)
*
*
* @return {void}

@@ -51,3 +51,3 @@ */

SVGSpriteStandalone.prototype._init.apply(this);
// Determine the maximum shape dimensions

@@ -63,3 +63,3 @@ this.maxDimensions = {width: 0, height: 0};

* Layout the sprite
*
*
* @param {Array} files Files

@@ -72,3 +72,3 @@ * @param {Function} cb Callback

var dimensionAttributes = shape.config.dimension.attributes;
// Create the SVG getter/setter

@@ -78,3 +78,3 @@ dataShape.__defineGetter__('svg', function() {

shapeDOM.setAttribute('id', shape.id);
if (!dimensionAttributes) {

@@ -91,6 +91,6 @@ shapeDOM.removeAttribute('width');

* Build the CSS sprite
*
*
* @param {String} xmlDeclaration XML declaration
* @param {String} doctypeDeclaration Doctype declaration
* @return {File} SVG sprite file
* @return {File} SVG sprite file
*/

@@ -108,3 +108,3 @@ SVGSpriteStack.prototype._buildSVG = function(xmlDeclaration, doctypeDeclaration) {

svg.add(pluck(this.data.shapes, 'svg'));
return svg.toFile(this._spriter.config.dest, this._addCacheBusting(svg));

@@ -111,0 +111,0 @@ };

2

lib/svg-sprite/mode/standalone.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -12,0 +12,0 @@ */

4

lib/svg-sprite/mode/symbol.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -66,3 +66,3 @@ */

shapeDOM.removeAttribute(attribute);
})
});
shapeDOM.setAttribute('id', shape.id);

@@ -69,0 +69,0 @@ });

2

lib/svg-sprite/mode/view.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -12,0 +12,0 @@ */

3

lib/svg-sprite/queue.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -16,3 +16,2 @@ */

async = require('async'),
os = require('os'),
events = require('events'),

@@ -19,0 +18,0 @@ SHAPE = require('./shape');

7

lib/svg-sprite/shape.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -42,4 +42,5 @@ */

*/
var generator = function(name, file) {
return util.format(template || '%s', path.basename(name.split(path.sep).join(this.separator).replace(/\s+/g, this.whitespace), '.svg'));
var generator = function(name/*, file*/) {
var pathname = this.separator ? name.split(path.sep).join(this.separator) : name;
return util.format(template || '%s', path.basename(pathname.replace(/\s+/g, this.whitespace), '.svg'));
};

@@ -46,0 +47,0 @@ return generator;

2

lib/svg-sprite/shape/dimensions.phantom.js

@@ -11,3 +11,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -14,0 +14,0 @@ */

2

lib/svg-sprite/sprite.js

@@ -9,3 +9,3 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2016 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE

@@ -12,0 +12,0 @@ */

131

lib/svg-sprite/transform/svgo.js

@@ -9,74 +9,87 @@ 'use strict';

* @author Joschi Kuphal <joschi@kuphal.net> (https://github.com/jkphl)
* @copyright © 2015 Joschi Kuphal
* @copyright © 2018 Joschi Kuphal
* @license MIT https://raw.github.com/jkphl/svg-sprite/master/LICENSE
*/
var SVGO = require('svgo'),
_ = require('lodash'),
pretty = require('prettysize'),
defaultPluginConfig = [
// {cleanupAttrs : true}, // cleanup attributes from newlines, trailing and repeating spaces
// {removeDoctype : true}, // remove doctype declaration
// {removeXMLProcInst : true}, // remove XML processing instructions
// {removeComments : true}, // remove comments
// {removeMetadata : true}, // remove `<metadata>`
// {removeTitle : true}, // remove `<title>`
// {removeEditorsNSData : true}, // remove editors namespaces, elements and attributes
// {removeEmptyAttrs : true}, // remove empty attributes
// {removeHiddenElems : true}, // remove hidden elements
// {removeEmptyText : true}, // remove empty Text elements
// {removeEmptyContainers : true}, // remove empty Container elements
{removeViewBox : false}, // remove `viewBox` attribute when possible
// {cleanupEnableBackground : true}, // remove or cleanup `enable-background` attribute when possible
// {convertStyleToAttrs : true}, // convert styles into attributes
// {convertColors : true}, // convert colors (from `rgb()` to `#rrggbb`, from `#rrggbb` to `#rgb`)
// {convertPathData : true}, // convert Path data to relative, convert one segment to another, trim useless delimiters and much more
// {convertTransform : true}, // collapse multiple transforms into one, convert matrices to the short aliases and much more
// {removeUnknownsAndDefaults : true}, // remove unknown elements content and attributes, remove attrs with default values
// {removeNonInheritableGroupAttrs : true}, // remove non-inheritable group's "presentation" attributes
// {removeUnusedNS : true}, // remove unused namespaces declaration
// {cleanupIDs : true}, // remove unused and minify used IDs
// {cleanupNumericValues : true}, // round numeric values to the fixed precision, remove default 'px' units
// {moveElemsAttrsToGroup : true}, // move elements attributes to the existing group wrapper
{moveGroupAttrsToElems : false} // move some group attributes to the content elements
// {collapseGroups : true}, // collapse useless groups
// {removeRasterImages : false}, // remove raster images (disabled by default)
// {mergePaths : true}, // merge multiple Paths into one
// {convertShapeToPath : true}, // convert some basic shapes to path
// {transformsWithOnePath : true}, // apply transforms, crop by real width, center vertical alignment and resize SVG with one Path inside
];
var SVGO = require('svgo'),
_ = require('lodash'),
pretty = require('prettysize'),
defaultPluginConfig = [
// {cleanupAttrs : true}, // cleanup attributes from newlines, trailing, and repeating spaces
// {removeDoctype : true}, // remove doctype declaration
// {removeXMLProcInst : true}, // remove XML processing instructions
// {removeComments : true}, // remove comments
// {removeMetadata : true}, // remove <metadata>
// {removeTitle : true}, // remove <title>
// {removeDesc : true}, // remove <desc>
// {removeUselessDefs : true}, // remove elements of <defs> without id
// {removeXMLNS : true}, // removes xmlns attribute (for inline svg, disabled by default)
// {removeEditorsNSData : true}, // remove editors namespaces, elements, and attributes
// {removeEmptyAttrs : true}, // remove empty attributes
// {removeHiddenElems : true}, // remove hidden elements
// {removeEmptyText : true}, // remove empty Text elements
// {removeEmptyContainers : true}, // remove empty Container elements
// {removeViewBox : true}, // remove viewBox attribute when possible
// {cleanupEnableBackground : true}, // remove or cleanup enable-background attribute when possible
// {minifyStyles : false}, // minify <style> elements content with CSSO
// {convertStyleToAttrs : false}, // convert styles into attributes
{inlineStyles : false}, // Move <style> definitions to inline style attributes where possible
// {convertColors : true}, // convert colors (from rgb() to #rrggbb, from #rrggbb to #rgb)
// {convertPathData : true}, // convert Path data to relative or absolute (whichever is shorter), convert one segment to another, trim useless delimiters, smart rounding, and much more
// {convertTransform : true}, // collapse multiple transforms into one, convert matrices to the short aliases, and much more
// {removeUnknownsAndDefaults : true}, // remove unknown elements content and attributes, remove attrs with default values
// {removeNonInheritableGroupAttrs : true}, // remove non-inheritable group's "presentation" attributes
// {removeUselessStrokeAndFill : true}, // remove useless stroke and fill attrs
// {removeUnusedNS : true}, // remove unused namespaces declaration
// {cleanupIDs : true}, // remove unused and minify used IDs
// {cleanupNumericValues : true}, // round numeric values to the fixed precision, remove default px units
// {cleanupListOfValues : true}, // round numeric values in attributes that take a list of numbers (like viewBox or enable-background)
// {moveElemsAttrsToGroup : true}, // move elements' attributes to their enclosing group
{ moveGroupAttrsToElems : true }, // move some group attributes to the contained elements
// {collapseGroups : true}, // collapse useless groups
// {removeRasterImages : true}, // remove raster images (disabled by default)
// {mergePaths : true}, // merge multiple Paths into one
// {convertShapeToPath : true}, // convert some basic shapes to <path>
// {sortAttrs : true}, // sort element attributes for epic readability (disabled by default)
// {removeDimensions : true}, // remove width/height attributes if viewBox is present (opposite to removeViewBox, disable it first) (disabled by default)
// {removeAttrs : true}, // remove attributes by pattern (disabled by default)
// {removeElementsByAttr : true}, // remove arbitrary elements by ID or className (disabled by default)
// {addClassesToSVGElement : true}, // add classnames to an outer <svg> element (disabled by default)
// {addAttributesToSVGElement : true}, // adds attributes to an outer <svg> element (disabled by default)
// {removeStyleElement : false}, // remove <style> elements (disabled by default)
// {removeScriptElement : true}, // remove <script> elements (disabled by default)
];
/**
* SVGO transformation
*
* @param {SVGShape} shape SVG shape
* @param {Object} config Transform configuration
* @param {SVGSpriter} spriter Spriter instance
* @param {Function} cb Callback
* @param {SVGShape} shape SVG shape
* @param {Object} config Transform configuration
* @param {SVGSpriter} spriter Spriter instance
* @param {Function} cb Callback
*/
module.exports = function(shape, config, spriter, cb) {
config = _.cloneDeep(config);
config.plugins = ('plugins' in config) ? defaultPluginConfig.concat(config.plugins) : defaultPluginConfig;
config.plugins.push({removeXMLProcInst: !!spriter.config.svg.xmlDeclaration});
config.plugins.push({removeDoctype: !!spriter.config.svg.doctypeDeclaration});
module.exports = function (shape, config, spriter, cb) {
config = _.cloneDeep(config);
config.plugins = ('plugins' in config) ? defaultPluginConfig.concat(config.plugins) : defaultPluginConfig;
config.plugins.push({ removeXMLProcInst: !!spriter.config.svg.xmlDeclaration });
config.plugins.push({ removeDoctype: !!spriter.config.svg.doctypeDeclaration });
var svg = shape.getSVG(false),
svgLength = svg.length,
svgoInstance = new SVGO(config);
var svg = shape.getSVG(false),
svgLength = svg.length,
svgoInstance = new SVGO(config);
try {
svgoInstance.optimize(svg, function(result) {
shape.setSVG(result.data);
svgoInstance.optimize(svg).then(function (result) {
shape.setSVG(result.data);
if (spriter.config.log.transports.console.level === 'debug') {
var optSVGLength = shape.getSVG(false).length;
spriter.debug('Optimized "%s" with SVGO (saved %s / %s%%)', shape.name, pretty(svgLength - optSVGLength), Math.round(100 * (svgLength - optSVGLength) / svgLength));
}
if (spriter.config.log.transports.console.level === 'debug') {
var optSVGLength = shape.getSVG(false).length;
spriter.debug('Optimized "%s" with SVGO (saved %s / %s%%)', shape.name, pretty(svgLength - optSVGLength), Math.round(100 * (svgLength - optSVGLength) / svgLength));
}
cb(null);
}).catch(function (error) {
spriter.error('Optimizing "%s" with SVGO failed with error "%s"', shape.name, error);
cb(null);
});
} catch (error) {
spriter.error('Optimizing "%s" with SVGO failed with error "%s"', shape.name, error);
cb(error);
}
});
};

4

LICENSE.txt
The MIT License (MIT)
Copyright © 2015 Joschi Kuphal
Copyright © 2018 Joschi Kuphal

@@ -20,2 +20,2 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of

IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

37

package.json
{
"name": "svg-sprite",
"version": "1.3.7",
"version": "1.4.0",
"author": "Joschi Kuphal <joschi@kuphal.net> (https://jkphl.is)",

@@ -33,2 +33,3 @@ "description": "SVG sprites & stacks galore — A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)",

"scripts": {
"pretest": "npm run lint",
"test": "istanbul test _mocha --report html -- test/*.js --reporter spec",

@@ -39,21 +40,21 @@ "lint": "jshint bin && jshint lib && jshint test",

"dependencies": {
"async": "^2.4.1",
"async": "^2.6.0",
"css-selector-parser": "^1.3.0",
"cssmin": "^0.4.3",
"cssom": "^0.3.2",
"dateformat": "^2.0.0",
"dateformat": "^3.0.3",
"glob": "^7.1.2",
"js-yaml": "^3.8.4",
"lodash": "^4.17.4",
"js-yaml": "^3.11.0",
"lodash": "^4.17.5",
"lodash.pluck": "^3.1.2",
"mkdirp": "^0.5.1",
"mustache": "^2.3.0",
"phantomjs-prebuilt": "^2.1.14",
"prettysize": "^0.1.0",
"svgo": "^0.7.2",
"vinyl": "^2.0.2",
"winston": "^2.3.1",
"phantomjs-prebuilt": "^2.1.16",
"prettysize": "^1.1.0",
"svgo": "^1.0.5",
"vinyl": "^2.1.0",
"winston": "^2.4.1",
"xmldom": "0.1.27",
"xpath": "^0.0.24",
"yargs": "^8.0.1"
"xpath": "^0.0.27",
"yargs": "^11.0.0"
},

@@ -67,10 +68,10 @@ "devDependencies": {

"rimraf": "",
"vinyl-fs": "^2.4.4",
"vinyl-fs": "^3.0.2",
"svg2png": "jkphl/svg2png",
"image-diff": "^1.6.3",
"node-sass": "^4.5.3",
"less": "^2.7.2",
"image-diff": "^2.0.0",
"node-sass": "^4.7.2",
"less": "^3.0.1",
"stylus": "^0.54.5",
"jshint": "^2.9.4",
"pn": "^1.0.0"
"jshint": "^2.9.5",
"pn": "^1.1.0"
},

@@ -77,0 +78,0 @@ "keywords": [

2

README.md

@@ -387,3 +387,3 @@ 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]

-----
Copyright © 2015 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.
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.

@@ -390,0 +390,0 @@ 

tmpl/common/sprite.css

Sorry, the diff of this file is not supported yet

tmpl/common/sprite.less

Sorry, the diff of this file is not supported yet

tmpl/common/sprite.scss

Sorry, the diff of this file is not supported yet

tmpl/common/sprite.styl

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc