Automate icon generation (UI + service icons)

[coenkoopmans]

Description

The icons get delivered by the designers in SVG format. Currently, these SVGs have been bundled to a font icon using IcoMoon. We want to prevent extending the license for this, and instead automate this process. The flow envisioned for this is:

1. Put SVGs in a folder (such as ui-icons) with standardized names (such as ui-user.svg, ui-business.svg).
2. Run an npm script (such as npm run generate-icons).
3. The SVGs get optimized (for example by SVGO).
4. The optimized SVGs are made into separate icon fonts (ui, service font) where the class names of the icons are equal to the name in the folder (so ui-user.svg becomes ui-user).
5. The relevant documentation MD pages are automatically updated to reflect the correct, newly generated icon set (total replacement, so make sure that old icons do not stay in the MD file)

Also, this process should automatically be executed by Travis CI, at least on develop and master.

Acceptance criteria

• [x] Create npm script for generating icons
• [x] Optimize SVGs
• [x] Generate icon fonts
• [ ] Automatically update the MD files

Tasks

• [ ] Check icons #40
• [ ] Check basic color schema #41
• [ ] Add Sass & SCSS files #43
• [ ] Update MarkDown file with processed icons #44
• [ ] Update bundle demo page #45
• [ ] Parameterise script #46
• [ ] Smart versioning for icon bundles #47
• [ ] Create downloadable bundle Zip #48
• [ ] Rework on screen logging #49
• [ ] Save and process renamed icons #50
• [ ] Handle deprecated icons #51
• [ ] Update Changelog #52
• [x] Send appropriate update to Community #53

References

• https://github.com/svg/svgo/
• https://www.npmjs.com/package/icon-font-generator
• https://github.com/jaywcjlove/svgtofont