39 lines
1.5 KiB
Markdown
39 lines
1.5 KiB
Markdown
|
# SVG Sprites
|
||
|
|
|
||
|
|
An SVG sprite is used for icons, this is generated by the [svg-sprite](https://github.com/svg-sprite/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
|
||
|
|
|
||
|
|
```scss
|
||
|
|
.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](https://github.com/svg/svgo) or [svgomg](https://jakearchibald.github.io/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](https://icomoon.io/) and are from the following packs:
|
||
|
|
* [IcoMoon - Free](https://icomoon.io/#icons) by [Keyamoon](http://keyamoon.com/) (GPL / CC BY 4.0)
|
||
|
|
* [Entypo+](http://www.entypo.com/) by [Daniel Bruce](http://danielbruce.se/) (CC BY-SA 4.0)
|
||
|
|
|
||
|
|
The icons have been compressed and resized.
|