Home

SOP: Adding Icons

Vaadin iconset and font build process. They ship 600 icons, we only need some.

1. conversionxl/vaadin-icons fork has a custom gulpfile.js, clone, install deps.
2. vaadin-icons/gulpfile.js: modify const cxlVaadinIconset.

3. vaadin-icons: run npx gulp icons iconfont.

4. iron-iconset-svg[name="vaadin"]: copy-paste vaadin-icons/iconset.html <g> elements to conversionxl/aybolit/packages/cxl-lumo-styles/src/icons.js.

5. iron-iconset-svg[name="vaadin"]: copy-paste vaadin-icons/vaadin-icons.woff2 base64 encoding to conversionxl/aybolit/packages/cxl-lumo-styles/src/icons.js.

Generate base64 hash for woff2 icon font using:

- `$ base64 vaadin-icons.woff2 > vaadin-icons.txt`
	ref: https://stackoverflow.com/a/26872453/1232232
OR
- https://hellogreg.github.io/woff2base/

6. style#cxl-lumo-styles-vaadin-icons: add / change CSS custom properties, get unicode values from step #3 task output to conversionxl/aybolit/packages/cxl-lumo-styles/src/icons.js.