@hyperdivison/heimdall-icons

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

Install

npm install @hyperdivsion/heimdall-icons

Usage

In your JavaScript:

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

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

In your HTML:

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

In your CSS:

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

API

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

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.

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
• 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.

Read Icon System with SVG Sprites by Chris Coyier for more information.