` and `<description>` elements into your SVGs. Please refer to the [meta data injection guide](docs/meta-data.md) for details. ### Aligning and duplicating shapes For CSS sprites using a `"horizontal"` or `"vertical"` layout it is sometimes desirable to align the shapes within the sprite. With the help of an external YAML file, *svg-sprite* can not only [control the alignment](docs/shape-alignment.md#aligning-and-duplicating-shapes) for each individual shape but also [create displaced copies](docs/shape-alignment.md#creating-displaced-shape-copies) of them without significantly increasing the sprite's file size. ### Tweaking and adding output formats *svg-sprite* uses [Mustache](https://mustache.github.io/) templates for rendering the various CSS resources. This makes it very easy to tailor the generated CSS / Sass / LESS / Stylus resources to your needs or add completely new output formats. Please refer to the [templating guide](docs/templating.md) to learn about the details. ## Command line usage *svg-sprite* comes with a pretty feature complete command line version. A typical example could look like this: ```bash svg-sprite --css --css-render-css --css-example --dest=out assets/*.svg ``` Please refer to the [CLI guide](docs/command-line.md) for further details. ## Known problems / To-do * SVGO does not minify element IDs when there are `<style>` or `<script>` elements contained in the file ## Changelog Please refer to the [GitHub releases](https://github.com/svg-sprite/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). 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://www.npmjs.com/package/svg-sprite [npm-image]: https://img.shields.io/npm/v/svg-sprite?logo=npm&logoColor=fff [npm-downloads]: https://img.shields.io/npm/dm/svg-sprite [ci-url]: https://github.com/svg-sprite/svg-sprite/actions/workflows/test.yml?query=branch%3A2.x [ci-image]: https://img.shields.io/github/actions/workflow/status/svg-sprite/svg-sprite/test.yml?branch=2.x&label=CI&logo=github [coveralls-url]: https://coveralls.io/github/svg-sprite/svg-sprite?branch=2.x [coveralls-image]: https://img.shields.io/coveralls/github/svg-sprite/svg-sprite/2.x?logo=coveralls </article></body></html>

# svg-sprite [![Build Status][ci-image]][ci-url] [![npm version][npm-image]][npm-url] [![Coverage Status][coveralls-image]][coveralls-url] [![npm downloads][npm-downloads]][npm-url] svg-sprite is a low-level [Node.js](https://nodejs.org/) module that **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 `` elements**, useful for foreground images as well, * inline sprites using the **`` element**, * inline sprites using the **`` element** * and [SVG stacks](https://simurai.com/blog/2012/04/02/svg-stacks). It comes with a set of [Mustache](https://mustache.github.io/) templates for creating stylesheets in good ol' [CSS](https://www.w3.org/Style/CSS/) or one of the major **pre-processor formats** ([Sass](https://sass-lang.com/), [Less](https://lesscss.org/) and [Stylus](https://stylus-lang.com/)). Tweaking the templates or even adding your own **custom output format** is really easy, just as switching on the generation of an **HTML example document** along with your sprite. For an up-to-date list of browsers supporting [SVG in general](https://caniuse.com/svg) respectively [SVG fragment identifiers](https://caniuse.com/svg-fragment) in particular (required for `` and `` sprites as well as SVG stacks) please refer to [caniuse.com](https://caniuse.com/). ## Grunt, Gulp & Co. Being a low-level library with support for [Node.js streams](https://github.com/substack/stream-handbook), *svg-sprite* doesn't take on the part of accessing the file system (i.e. reading the source SVGs from and writing the sprites and CSS files to disk). If you don't want to take care of this stuff yourself, you might rather have a look at the available wrappers for **Grunt** ([grunt-svg-sprite](https://github.com/svg-sprite/grunt-svg-sprite)) and **Gulp** ([gulp-svg-sprite](https://github.com/svg-sprite/gulp-svg-sprite)). *svg-sprite* is also the foundation of the **[iconizr](https://github.com/jkphl/node-iconizr)** project, which serves high-quality SVG based **CSS icon kits with PNG fallbacks**. ## Table of contents * [Installation](#installation) * [Getting started](#getting-started) * [Usage pattern](#usage-pattern) * [Standard API](docs/api.md) * [Grunt & Gulp wrappers](docs/grunt-gulp.md) * [Configuration basics](#configuration-basics) * [General configuration options](#general-configuration-options) * [Output modes](#output-modes) * [Common mode properties](#common-mode-properties) * [Basic examples](#basic-examples) * [Output destinations](#output-destinations) * [Pre-processor formats and the sprite location](#pre-processor-formats-and-the-sprite-location) * [Full configuration documentation](docs/configuration.md) * [Online configurator & project kickstarter](https://svg-sprite.github.io/svg-sprite/) * [Advanced techniques](#advanced-techniques) * [Meta data injection](docs/meta-data.md) * [Aligning and duplicating shapes](docs/shape-alignment.md) * [Tweaking and adding output formats](docs/templating.md) * [Command line usage](docs/command-line.md) * [Known problems / To-do](#known-problems--to-do) * [Changelog](CHANGELOG.md) * [Legal](#legal) ## Installation To install *svg-sprite* globally, run: ```bash npm install svg-sprite -g ``` ## Getting started Crafting a sprite with *svg-sprite* typically follows these steps: 1. You [create an instance of the SVGSpriter](docs/api.md#svgspriter-config-), passing a main configuration object to the constructor. 2. You [register a couple of SVG source files](docs/api.md#svgspriteraddfile--name-svg-) for processing. 3. You [trigger the compilation process](docs/api.md#svgspritercompile-config--callback-) and receive the generated files (sprite, CSS, example documents etc.). The procedure is the very same for all supported sprite types («modes»). ### Usage pattern ```js const fs = require('fs'); const path = require('path'); const SVGSpriter = require('svg-sprite'); // Create spriter instance (see below for `config` examples) const spriter = new SVGSpriter(config); // Add SVG source files — the manual way ... spriter.add('assets/svg-1.svg', null, fs.readFileSync('assets/svg-1.svg', 'utf-8')); spriter.add('assets/svg-2.svg', null, fs.readFileSync('assets/svg-2.svg', 'utf-8')); /* ... */ // Compile the sprite spriter.compile((error, result) => { /* Write `result` files to disk (or do whatever with them ...) */ for (const mode in result) { for (const resource in result[mode]) { fs.mkdirSync(path.dirname(result[mode][resource].path), { recursive: true }); fs.writeFileSync(result[mode][resource].path, result[mode][resource].contents); } } }); // Or compile the sprite async const { result } = await spriter.compileAsync(); /* Write `result` files to disk (or do whatever with them ...) */ for (const mode in result) { for (const resource in result[mode]) { fs.mkdirSync(path.dirname(result[mode][resource].path), { recursive: true }); fs.writeFileSync(result[mode][resource].path, result[mode][resource].contents); } } ``` As you can see, big parts of the above are dealing with disk I/O. In this regard, you can make your life easier by [using the Grunt or Gulp wrappers](docs/grunt-gulp.md) instead of the [standard API](docs/api.md). ## Configuration basics Of course you noticed the `config` variable passed to the constructor in the above example. This is *svg-sprite*'s **main configuration** — an `Object` with the following properties: ```js { dest: , // Main output directory log: , // Logging verbosity or custom logger shape:

	Stars	Issues	Version	Updated	Created
external-svg-sprite-loader			7.2.0	3 years ago	8 years ago
svg-icon-sprite			1.1.1	4 years ago	4 years ago
svg-sprite	1,890	48	2.0.4	a month ago	10 years ago
svg-sprite-loader	2,009	148	6.0.11	3 years ago	9 years ago

external-svg-sprite-loader vs svg-icon-sprite vs svg-sprite vs svg-sprite-loader

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past