From 1971a1b7add3ab9e3245ed3c302622b1b2269d31 Mon Sep 17 00:00:00 2001 From: Ed Wilde Date: Tue, 1 Aug 2023 09:52:39 +1200 Subject: [PATCH] Add information on icon sprite generation and licenses --- scss/_iconsprite.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 scss/_iconsprite.md diff --git a/scss/_iconsprite.md b/scss/_iconsprite.md new file mode 100644 index 0000000..53c43b5 --- /dev/null +++ b/scss/_iconsprite.md @@ -0,0 +1,38 @@ +# 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.