{{Attention|UBIK-Standard is currently only supported for the Xamarin client.}}
==Creation==
The process for creating icons is documented here.
===Step 01: Asset Creation===
The first step is to find similar, open-source icons to tweak. [https://themes-pixeden.com/font-demos/7-stroke/ Pixeden], [https://lineicons.com/icons/ LineIcons], or [https://linea.io/ LineA], are good starting points, as they have a similar style.
When tweaking (for example, in Adobe Illustrator), use a stroke width of 3 for the base line thickness.
It is good practice to produce three sets of .SVGs; a stroke version, an expanded version, and a final version. The stroke version is more easily edited, but the lines must be 'expanded' in Illustrator to be imported as icons. Finally, duplicate the expanded version, and name it using the following syntax:
<code>001#ubik-U0x26</code>
* The first number is used to keep the icon list orderly.
* Add as many tags as desired using the # as separators. For example, a check mark icon may be listed as #ok#confirm#check. The - ends the tag portion of the syntax.
* The glyph code assigns the icon to a certain space on the character map. As different device vendors block different glyph code sets for different uses, it is good practice to overwrite the basic alphabet, numbers, and symbols, to ensure the icons work on a large range of devices. Starting from 21, glyph codes may use numbers, or letters from 2A (2 here being an example) to 2F.
===Step 02: TTF Generation===
[https://icomoon.io/app/ IcoMoon] is a useful online tool for generating the icon font, that can then be installed on a device or packaged into the client resources.
* Import Icons (top left) - Use this button to import an already existing font file, when creating additions, for example.
* On the Selection tab (bottom center), ensure that the desired set is fully selected, and shown with an orange outline.
* On the Generate Font tab (bottom right), double check the generated tags for the icons. The settings button beside the download button allows you to edit the font file name and version.
* The download button exports the .ttf, among other resources, in a .ZIP, that is then downloaded.
==Usage==
<br>
[[Category:Pages with broken file links|Icon Font]]
== Known Issues ==
A second issue was encountered where using unstable behavior was observed when using UBIK-Standard.ttf for icons when the user switched tabs, leaving UBIK running in the background. In these cases, circular icon containers became square when switching back to the app, and the icon glyphs were no longer visible. However, using the <i>GlyphButton</i> and <i>GlyphLabel</i> elements (as opposed to simply <i>Button</i> and <i>Label</i>) seems to prevent this issue.
==Creation==
The process for creating icons is documented here.
===Step 01: Asset Creation===
The first step is to find similar, open-source icons to tweak. [https://themes-pixeden.com/font-demos/7-stroke/ Pixeden], [https://lineicons.com/icons/ LineIcons], or [https://linea.io/ LineA], are good starting points, as they have a similar style.
When tweaking (for example, in Adobe Illustrator), use a stroke width of 3 for the base line thickness.
It is good practice to produce three sets of .SVGs; a stroke version, an expanded version, and a final version. The stroke version is more easily edited, but the lines must be 'expanded' in Illustrator to be imported as icons. Finally, duplicate the expanded version, and name it using the following syntax:
<code>001#ubik-U0x26</code>
* The first number is used to keep the icon list orderly.
* Add as many tags as desired using the # as separators. For example, a check mark icon may be listed as #ok#confirm#check. The - ends the tag portion of the syntax.
* The glyph code assigns the icon to a certain space on the character map. As different device vendors block different glyph code sets for different uses, it is good practice to overwrite the basic alphabet, numbers, and symbols, to ensure the icons work on a large range of devices. Starting from 21, glyph codes may use numbers, or letters from 2A (2 here being an example) to 2F.
===Step 02: TTF Generation===
[https://icomoon.io/app/ IcoMoon] is a useful online tool for generating the icon font, that can then be installed on a device or packaged into the client resources.
* Import Icons (top left) - Use this button to import an already existing font file, when creating additions, for example.
* On the Selection tab (bottom center), ensure that the desired set is fully selected, and shown with an orange outline.
* On the Generate Font tab (bottom right), double check the generated tags for the icons. The settings button beside the download button allows you to edit the font file name and version.
* The download button exports the .ttf, among other resources, in a .ZIP, that is then downloaded.
[[Category:Pages with broken file links|Icon Font]]