https://github.com/dnnsk/icon-sprite-generator
User-friendly SVG sprite generation
https://github.com/dnnsk/icon-sprite-generator
icons-generator javascript javascript-library node-module sprite svg svg-icons svg-sprites
Last synced: 7 months ago
JSON representation
User-friendly SVG sprite generation
- Host: GitHub
- URL: https://github.com/dnnsk/icon-sprite-generator
- Owner: dnnsk
- License: mit
- Created: 2018-02-17T10:49:16.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-17T11:26:17.000Z (over 7 years ago)
- Last Synced: 2025-03-11T15:15:31.550Z (7 months ago)
- Topics: icons-generator, javascript, javascript-library, node-module, sprite, svg, svg-icons, svg-sprites
- Language: JavaScript
- Size: 72.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# icon-sprite-generator
> User-friendly SVG sprite generation
## Features
- Promise API
- Supports glob file matching (patterns based on [globby](https://github.com/sindresorhus/globby))
- SVG cleaner built-in (removes unneeded attributes and tags)
- Exports sprite on disk
- Optional wrapping with JavaScript Loader (for browsers)
## Install
```
$ npm install icon-sprite-generator --save
```
## Usage
```javascript
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);
});
```
## API
### generator([options])
Returns a Promise of generated sprite.
#### options
Type: `Object`
##### input
Type: **[`globby pattern`](https://github.com/sindresorhus/globby)** (`string` `Array`)
Path/s to your directory with icons (supports multiple patterns).
##### output
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".
##### mode
Type: `string`
Default: `auto`
You can natively set mode to `jsLoader` if you want wrap sprite with JS Loader.
## 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 ``.
That's how it looks:
```js
(function() {
var ready = false;
var inject = function() {
if (ready) { return; }
ready = true;
var svgHolder = document.createElement("div");
svgHolder.className += "svg-sprites-holder";
svgHolder.innerHTML = "