https://github.com/mrmlnc/svg2sprite
:fireworks: A very simple module to generate SVG sprites.
https://github.com/mrmlnc/svg2sprite
icons sprites svg svg-sprites
Last synced: over 1 year ago
JSON representation
:fireworks: A very simple module to generate SVG sprites.
- Host: GitHub
- URL: https://github.com/mrmlnc/svg2sprite
- Owner: mrmlnc
- License: mit
- Created: 2016-08-14T17:41:29.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-05-04T17:29:15.000Z (about 9 years ago)
- Last Synced: 2025-03-18T15:21:32.089Z (over 1 year ago)
- Topics: icons, sprites, svg, svg-sprites
- Language: TypeScript
- Homepage:
- Size: 51.8 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svg2sprite
> A very simple module to generate SVG sprites.
[](https://travis-ci.org/mrmlnc/svg2sprite)
## Install
```shell
$ npm i -D svg2sprite
```
## Why?
Existing solutions have many dependencies.
## Usage
```js
const svgSprite = require('svg2sprite');
const sprite = svgSprite.collection({ inline: true });
sprite.add('chevron-up', '');
sprite.add('chevron-down', '');
const svg = sprite.compile();
console.log(svg);
//
//
//
//
```
## Supported methods
#### `.collection([options])`
This method creates a new item collection and returns the available methods for it. See all available [options](#supported-options).
#### `.add(name, content, options)`
This method adds an item to the collection. Using the last argument you can transfer individual settings for that item (e.g. `attributes`). See all available [options](#supported-options).
#### `.get(name)`
Returns the contents of a specified element.
#### `.remove(name)`
Removes the specified item from the collection.
#### `.clean()`
Removes all elements in the collection.
#### `.compile()`
Returns the builded sprite.
## Supported options
#### rootAttributes
* Type: `Object`
* Default: `{}`
The attributes that will be added to the root `svg` tag.
#### inline
* Type: `Boolean`
* Default: `false`
If you want to embed the sprite into your HTML source, you will want to set this to `true` in order to prevent the creation of SVG namespace declarations and to set some other attributes for effectively hiding the library sprite.
#### iconAttributes
* Type: `Object`
* Default: `{}`
The attributes of each icon. Current attribute values will be overwritten.
#### iconPrefix
* Type: `String`
* Default: `''`
The name prefix for each icon.
#### iconSuffix
* Type: `String`
* Default: `''`
The name suffix for each icon.
#### clean.stripEmptyTags
* Type: `Boolean`
* Default: `true`
Removes empty tags such as `` or ``.
#### clean.stripTags
* Type: `Array`
* Default: `['title', 'desc']`
Removes tags, that are listed in this list.
#### clean.stripAttrs
* Type: `Array`
* Default: `[]`
Removes attributes, that are listed in this list.
If you specify a string, then use the strict comparison. You can also specify the object and the type of comparison.
```js
{
clean: {
stripAttrs: [
// true for: style=".."
'style',
// true for: stoke="..", stoke-width="..", etc.
{ pattern: 'stroke', strict: false }
]
}
}
```
#### clean.stripExtraAttrs
* Type: `Boolean`
* Default: `true`
Removes Sketch and xmlns:* attributes.
#### clean.stripStyles
* Type: `Boolean|Array`
* Default: `true`
Removes `style` attributes from SVG definitions, or a list of the properties that will be removed from `style` tag and atrribute.
## Related
* [svg2sprite-cli](https://github.com/mrmlnc/svg2sprite-cli) - CLI interface for this module.
* [yellfy-svg-sprite](https://github.com/mrmlnc/yellfy-svg-sprite) - svg2sprite wrapper for easy integration into the development process.
## Changelog
See the [Releases section of our GitHub project](https://github.com/mrmlnc/svg2sprite/releases) for changelogs for each release version.
## License
This software is released under the terms of the MIT license.