Zabbix
Public
Source
1
+
# Zabbix UI icon set2
+
3
+
[](images/sprites.png)4
+
5
+
Having a sprite file is not a terrible idea in general, but it has its set of problems.6
+
- Different icon colors or icon sizes create duplicates in the sprite file:<br>7
+
[](images/duplicates.png)8
+
- Sprite file becomes a junkyard of icons because of the lack of grids:<br>9
+
[](images/grid.png)10
+
- Many icons are referenced multiple times with different names. This makes really hard to find the right icon in a set:<br>11
+
[](images/names.png)12
+
13
+
## Icon font14
+
15
+
To mitigate the problems of the sprite files it was decided to create an icon font that could be used across the Zabbix Frontend.<br><br>16
+
[](images/icons.png)17
+
18
+
## Build process19
+
20
+
- Execute `npm install` to initialize the project.21
+
- Add icons into the `svg` directory (if needed).22
+
*Existing icons have the* **4.8mm x 4.8mm** *max size and are centered into a* **6mm x 6mm** *image.*23
+
- Execute `npm run generate` to create icon font.24
+
- Execute `npm run cleanup` to remove extra files created by the generation process.25
+
26
+
That's it! Now `dist` directory contains all the required files including the `index.html` file with the icon list demo.