User-friendly SVG sprite generation
- Promise API
- Supports glob file matching (patterns based on globby)
- SVG cleaner built-in (removes unneeded attributes and tags)
- Exports sprite on disk
- Optional wrapping with JavaScript Loader (for browsers)
$ npm install icon-sprite-generator --save
const generator = require("icon-sprite-generator");
/* async/await */
(async () => {
const sprite = await generator({
output: "file.svg",
});
console.log(sprite);
})();
/* Promises */
generator({
output: "file.svg",
}).then(sprite => {
console.log(sprite);
});Returns a Promise of generated sprite.
Type: Object
Type: globby pattern (string Array)
Path/s to your directory with icons (supports multiple patterns).
Type: string
Default: false
Provide output path and full filename (with extension) if you want to save it on disk.
Note: Sprite will be wrapped with JS loader in case of extension equals ".js".
Type: string
Default: auto
You can natively set mode to jsLoader if you want wrap sprite with JS Loader.
This additional option can wrap generated sprite with JavaScript code for browsers.
It inserts your sprite into DOM on DOMContentLoaded event.
You can include this file into <head>.
That's how it looks:
(function() {
var ready = false;
var inject = function() {
if (ready) { return; }
ready = true;
var svgHolder = document.createElement("div");
svgHolder.className += "svg-sprites-holder";
svgHolder.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\....";
document.body.appendChild(svgHolder);
};
if (document.readyState === "complete") { inject(); }
else { document.addEventListener("DOMContentLoaded", inject); }
})();In order to test this module - run npm test
MIT © Denis Kalinichenko