tonyair/silverstripe-betternavigator
1
0
Fork 0
mirror of https://github.com/jonom/silverstripe-betternavigator.git synced 2024-10-22 14:05:51 +02:00
Code Issues Projects Releases Wiki Activity
4a2c48bdce
silverstripe-betternavigator/scss/_iconsprite.md

1.5 KiB
Raw 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:

The icons have been compressed and resized.