# ember-cli-svgstore

> Ember addon to combine SVGs as symbols in a spritesheet.

Latest version **0.4.1** (published 2017-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-cli-svgstore
pnpm add ember-cli-svgstore
yarn add ember-cli-svgstore
bun add ember-cli-svgstore
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2017-08-11 |
| First published | 2015-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.10.0 |
| Dependencies | 6 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Dan Freeman |
| Maintainers | bsipple, dfreeman |
| Keywords | ember-addon, svg, svgstore |

## Links

- npm: https://www.npmjs.com/package/ember-cli-svgstore
- Repository: https://github.com/salsify/ember-cli-svgstore
- Homepage: https://github.com/salsify/ember-cli-svgstore#readme
- Issues: https://github.com/salsify/ember-cli-svgstore/issues
- npm.io page: https://npm.io/package/ember-cli-svgstore

## Dependencies (6)

- [merge](https://npm.io/package/merge.md) ^1.2.0
- [make-array](https://npm.io/package/make-array.md) ^1.0.1
- [broccoli-funnel](https://npm.io/package/broccoli-funnel.md) ^1.0.1
- [broccoli-source](https://npm.io/package/broccoli-source.md) ^1.1.0
- [broccoli-svgstore](https://npm.io/package/broccoli-svgstore.md) ^0.4.0
- [broccoli-merge-trees](https://npm.io/package/broccoli-merge-trees.md) ^1.1.1

## Recent versions

- 0.4.1 (latest) — 2017-08-11
- 0.4.0 — 2017-01-03
- 0.3.0 — 2016-08-04
- 0.2.2 — 2016-02-17
- 0.2.1 — 2016-01-06
- 0.2.0 — 2015-06-18
- 0.1.0 — 2015-02-23

## README

# ember-cli-svgstore [![Build Status](https://travis-ci.org/salsify/ember-cli-svgstore.svg?branch=master)](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
  <svg role="img">
    <use xlink:href="/assets/icons.svg#user"></use>
  </svg>
```

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 `<svg>` of `<symbols>` 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`.

---
_Source: https://npm.io/package/ember-cli-svgstore · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._