# @hyperdivison/heimdall-icons
[![travis][travis-image]][travis-url]

SVG sprite sheet and module for icons use in Heimdall Desktop.

## Install

```
npm install @hyperdivsion/heimdall-icons
```

## Usage

In your JavaScript:

```js
const sprite = require('@hyperdivison/heimdall-icons')

document.body.insertBefore(sprite.getNode(), document.body.firstChild)
```

In your HTML:

```html
<svg><use xlink:href="#solid-cross-ui" /></svg>
```

In your CSS:

```css
svg {
  fill: #fff;
  height: 2em;
  width: 2em;
}
```

## API

The main export privides an object that lets you access the sprite:

```js
const sprite = require('@hyperdivison/heimdall-icons')
```

The export has the following API:

### `sprite.name`

The `.id` of the spritesheet element.

### `sprite.toString()`

The full string of the sprite sheet xml.

### `sprite.path`

The path to the sprite sheet in `node_modules`.

### `sprite.getNode()`

Returns a DOM node of the sprite sheet, ready to be inserted into the body of the document.  Does not work in node.  If you need the string content of the sheet, use `.toString()`.

## Example

To see an example implementation, try `npm start`. Source code is in [`example.js`](example.js).

## Developing

Adding new icons:

- Add them to the icons folder
- Add budicons by adding the name selector to the `copy-budicons.js` array.
- `npm run version && git push --tags && git push`

## See more

- [hypermodules/entypo](https://github.com/hypermodules/entypo)
- [Kriesse/dat-icons](https://github.com/Kriesse/dat-icons)

### What is a SVG sprite?

A SVG sprite is a hidden SVG element inserted at the top of the body element that defines a set of icons with unique IDs. These icons can later be referenced throughout the document with the [`<use>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use).

Read [Icon System with SVG Sprites](https://css-tricks.com/svg-sprites-use-better-icon-fonts/) by [Chris Coyier](http://chriscoyier.net/) for more information.

[budicon]: https://budicon.co
[travis-image]: https://travis-ci.com/hyperdivision/budicon.svg?token=MHQzYeFDHxgr3Y1iiUoN&branch=master
[travis-url]: https://travis-ci.com/hyperdivision/budicon
