1.5 KiB

Raw Permalink Blame History

SVG Sprites

An SVG sprite is used for icons, this is generated by the svg-sprite node module. This means icons can be easily pre-loaded when the navigator is collapsed.

Using the icons

After compilation, a _iconsprite.scss file is created. This should be included in the main scss.

To include an icon as background image in an element, extend the icon and the dimensions

.bn-icon-close {
  @extend .svg-images--bn-icon--close;
  @extend .svg-images--bn-icon--close-dims;
}

Adding or removing icons

If you need to add or remove an icon, then add or remove it from the ./images/bn-icon/ directory and re-compile.

Only SVG is supported, and it is recommended to compress the SVG first using a tool such as svgo or svgomg first.

Compiling the icon sprite

This can be done by running npm run build:svg from the root of the module.

All icons in the ./images/bn-icon/ directory are compiled into a single SVG and output to ./css/svg/.

The ./scss/_iconsprite.scss file is generated with the correct background positions based on the size of each icon.

License

Icons are sourced from IcoMoon and are from the following packs:

IcoMoon - Free by Keyamoon (GPL / CC BY 4.0)
Entypo+ by Daniel Bruce (CC BY-SA 4.0)

The icons have been compressed and resized.

1.5 KiB Raw Permalink Blame History