Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/briansipple/ember-cli-svgstore
Ember addon to combine SVGs as symbols in a spritesheet.
https://github.com/briansipple/ember-cli-svgstore
Last synced: 21 days ago
JSON representation
Ember addon to combine SVGs as symbols in a spritesheet.
- Host: GitHub
- URL: https://github.com/briansipple/ember-cli-svgstore
- Owner: BrianSipple
- License: mit
- Created: 2015-02-23T20:51:24.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-04-10T15:42:49.000Z (over 6 years ago)
- Last Synced: 2024-10-15T04:33:06.647Z (about 1 month ago)
- Language: JavaScript
- Size: 104 KB
- Stars: 20
- Watchers: 19
- Forks: 8
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-cli-svgstore [](https://travis-ci.org/salsify/ember-cli-svgstore)
This Ember-CLI addon uses [broccoli-svgstore](https://github.com/jmarquis/broccoli-svgstore) to combine the contents
of individual SVG files as named symbols in one (or more) master SVGs.
The technique employed is outlined in [this CSS Tricks post](http://css-tricks.com/svg-sprites-use-better-icon-fonts/).
## Installation
```
npm install --save-dev ember-cli-svgstore
```
## Usage
The configuration below would combine all SVGs under e.g. `app/icons` into one file `icons.svg`:
```js
// ember-cli-build.js
var app = new EmberApp(defaults, {
svgstore: {
files: {
sourceDirs: 'app/icons',
outputFile: '/assets/icons.svg'
}
}
});
```
Given an input file in `app/icons/user.svg`, the contents of that file could be embedded in a page like so:
```html
```
SVGs that are processed by this addon are usually more or less static assets, and it makes sense for them to live in the project's `public/` dir. However, since ember-cli automatically includes all files in `/public` in the build, they effectively get duplicated. To prevent processed files from ending up in `dist/`, use the `excludeSourceFiles` flag:
```js
// ember-cli-build.js
var app = new EmberApp(defaults, {
svgstore: {
excludeSourceFiles: true, // exclude all processed source files
files: {
sourceDirs: [ 'public/icons' ],
outputFile: '/assets/icons.svg',
excludeSourceFiles: true // exclude source files only for this master SVG
}
}
});
```
Note that if your source SVGs are in any other directory (i.e. `/app`, `/vendor`, etc.), they will not automatically be included in the build, and the `excludeSourceFiles` option is not necessary.
Because this addon uses `broccoli-svgstore` and `svgstore` under the hood it's possible
to pass the `options` accepted by `svgstore` through during the build.
For example, if you wanted to hide your `` of `` from view, but
still keep it rendered in the DOM, you can take advantage of `svgstore`'s `svgAttrs` option:
```js
var app = new EmberAddon(defaults, {
svgstore: {
excludeSourceFiles: true, // exclude all processed source files
files: {
sourceDirs: [ 'public/icons' ],
outputFile: '/assets/icons.svg',
excludeSourceFiles: true // exclude source files only for this master SVG
},
svgstoreOpts: {
svgAttrs: {
style: 'position: absolute; top: 0; left: 0; width: 0%; height: 0%;'
}
}
}
});
```
See the [`svgstore` options API](https://github.com/svgstore/svgstore#options) for more details.
## Options
### `files`
May be a single object or an array. Each object should have the following two keys:
- `sourceDirs` a string or array of strings specifying the directories that should be crawled for SVGs to include
- `outputFile` the destination to write the final SVG to
- `excludeSourceFiles` whether the files in `sourceDirs` are excluded from the build or not
### `excludeSourceFiles`
Boolean indicating whether all source files should be excluded from the build or not, defaults to `false`.
### `svgstoreOpts`
An options hash to be passed through to `svgstore`.