For those, who use npm
and task runners like grunt
or gulp
I'd highly recommend using the following node module: https://github.com/svg-sprite/svg-sprite
It takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources.
It's configurable, so its possible to create both sprite modes <view>
and <symbol>
. So they could be used in both html and css.
Mode configuration looks as follows:
// Common mode properties
const config = {
mode: {
<mode>: {
dest: "<mode>", // Mode specific output directory
prefix: "svg-%s", // Prefix for CSS selectors
dimensions: "-dims", // Suffix for dimension CSS selectors
sprite: "svg/sprite.<mode>.svg", // Sprite path and name
bust: true || false, // Cache busting (mode dependent default value)
render: { // Stylesheet rendering definitions
/* -------------------------------------------
css: false, // CSS stylesheet options
scss: false, // Sass stylesheet options
less: false, // LESS stylesheet options
styl: false, // Stylus stylesheet options
<custom>: ... // Custom stylesheet options
------------------------------------------- */
},
example: false // Create an HTML example document
}
}
}
For more details, refer to their Docs.