# broccoli-svgstore

> Combine all your SVGs into one using

Latest version **0.4.2** (published 2017-04-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install broccoli-svgstore
pnpm add broccoli-svgstore
yarn add broccoli-svgstore
bun add broccoli-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.2 |
| Published | 2017-04-05 |
| First published | 2014-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Brian Sipple |
| Maintainers | bsipple, jeremymarquis |
| Keywords | broccoli-plugin, svg, svgstore, broccoli svgstore, node svgstore |

## Links

- npm: https://www.npmjs.com/package/broccoli-svgstore
- Repository: https://github.com/svgstore/broccoli-svgstore
- Issues: https://github.com/svgstore/broccoli-svgstore/issues
- npm.io page: https://npm.io/package/broccoli-svgstore

## Dependencies (5)

- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [svgstore](https://npm.io/package/svgstore.md) ^2.0.2
- [object-assign](https://npm.io/package/object-assign.md) 4.1.0
- [broccoli-caching-writer](https://npm.io/package/broccoli-caching-writer.md) 3.0.0
- [broccoli-kitchen-sink-helpers](https://npm.io/package/broccoli-kitchen-sink-helpers.md) 0.3.1

## Recent versions

- 0.4.2 (latest) — 2017-04-05
- 0.4.1 — 2017-01-09
- 0.4.0 — 2016-12-20
- 0.3.1 — 2016-09-13
- 0.2.1 — 2016-08-28
- 0.2.0 — 2016-08-03
- 0.1.0 — 2014-12-04

## README

# broccoli-svgstore

[![Latest NPM release][npm-badge]][npm-badge-url]
[![CircleCI Build Status][circle-badge]][circle-badge-url]
[![License][license-badge]][license-badge-url]
[![Dependencies][dependencies-badge]][dependencies-badge-url]
[![Dev Dependencies][devDependencies-badge]][devDependencies-badge-url]


_A [Broccoli](https://github.com/broccolijs/broccoli) plugin built on top of
[`broccoli-caching-writer`](https://github.com/ember-cli/broccoli-caching-writer) that processes
SVGs with [`svgstore`](https://github.com/svgstore/svgstore)_


## Installation


```shell
npm install --save broccoli-svgstore
```

## Usage

`broccoli-svgstore` accepts an [`inputNode`](https://github.com/broccolijs/broccoli/blob/master/docs/node-api.md#part-2-node-api-specification) --
or a list of `inputNodes` -- and converts the contents of SVG files found within each node's directory root into
SVG `<symbol/>`s (processing them with [`svgstore`](https://github.com/svgstore/svgstore)).

The transformed content is then written into a single file (see: the [`outputFile` option](#option-outputFile)),
and returned as an output node of the Broccoli build processes.

```javascript
var svgstore = require("broccoli-svgstore");

var outputNode = svgstore(inputNodes, {
  outputFile: "/assets/icons.svg"
});
```

For a specific example, check out [`ember-cli-svgstore's` use of `broccoli-svgstore`](https://github.com/salsify/ember-cli-svgstore/blob/master/index.js)

Within your markup, you should now be able to "use" each symbol inside of other SVGs:

```html
<svg><use xlink:href="icon-doge"/></svg>
```

## API
- `inputNode|inputNodes` {inputNode or Array of inputNodes}: A standalone [Broccoli Node](https://github.com/broccolijs/broccoli/blob/master/docs/node-api.md), or a list of them.
  The root of each node's source directory will form the starting point for a recursive search of `.svg` files.

- `options` {Object}: [Options for `broccoli-svgstore`](#options)

### Options
- <a name="option-outputFile"></a>`outputFile` {string}: The name of the file -- including any directory
  path -- [to which output will be written](https://github.com/broccolijs/broccoli-plugin#pluginprototypebuild)
  (starting from the root directory of your build destination).

  Required: `true`
  Default: `null`

- `annotation` {string}: a [Broccoli Plugin annotation](https://github.com/broccolijs/broccoli-plugin#new-plugininputnodes-options)

  Required: `false`
  Default: `null`


- `svgstoreOpts` {Object}: Options to be passed on to `svgstore` during the processing step.
  - See: `svgstore`'s options [documentation](https://github.com/svgstore/svgstore#options)

  Required: `false`
  Default: `{}`

- `fileSettings` {Object}: a hash of per-file settings.
That is, each root key should correspond to a file name of an SVG that
will be found in this node. It's value should then be an Object with any of the following settings:
  + `id` {string}: A custom id to be used for this SVG's final `<symbol>`.
  + `svgstoreOpts` {Object}: same as `options.svgstoreOpts`, but scoped to the file

  Example usage:

  ```js
    var outputNode = svgstore(inputNodes, {
      outputFile: "/assets/icons.svg",
      fileSettings: {
        twitter: { id: 'icon-twitter' },
        menu: {
          id: 'icon-hamburger-menu',
          svgstoreOpts: {
            symbolAttrs: { preserveAspectRatio: 'xMinYMid' }
          }
        }
    });
  ```


[npm-badge]: https://img.shields.io/npm/v/broccoli-svgstore.svg
[npm-badge-url]: https://www.npmjs.com/package/broccoli-svgstore
[circle-badge]: https://circleci.com/gh/svgstore/broccoli-svgstore/tree/master.svg?style=svg&circle-token={{CIRCLE_TOKEN}}
[circle-badge-url]: https://circleci.com/gh/svgstore/broccoli-svgstore/tree/master
[license-badge]: https://img.shields.io/npm/l/broccoli-svgstore.svg
[license-badge-url]: LICENSE.md
[dependencies-badge]: https://david-dm.org/svgstore/broccoli-svgstore/status.svg
[dependencies-badge-url]: https://david-dm.org/svgstore/broccoli-svgstore
[devDependencies-badge]: https://david-dm.org/svgstore/broccoli-svgstore/dev-status.svg
[devDependencies-badge-url]: https://david-dm.org/svgstore/broccoli-svgstore#info=devDependencies

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