Icons and Icon font

Icons and Icon font

<Icon>

/app/ui/icons/Icon.tsx

The <Icon> component is used to display icons from the mobile icon font.

Props :

• color (string): Icon color
• name (string): Name of the icon in the icon font
• paddingHorizontal: (number) Corresponds to the style property "paddingHorizontal"
• size (number): Size of the icon (in fontSize unit)
• focused (boolean): _Don't know what is it for _

<IconOnOff>

/app/ui/icons/IconOnOff.tsx

An icon that changes whenever it is considered as "on" or as "off".

Props :

• name (string): Name on the icon set. Computed icon names will be <name>-on and <name>-off ans must exist in the icon font.
• focused (boolean): Controls whenever the icon is considered as "on" or "off".

... All other Icon props.

Preconfigured header icons

/app/ui/icons/SearchIcon.tsx

exports a certain number of icon components that are just <Icon> with a predefined name, size (22) and color (white). Used for common header icons. Available icons are <SearchIcon> and <CloseIcon>.

Update the icon font

This icon font is made with the Icomoon.io tool. To update the icon font, just follow these steps :

1. Open the IcoMoon App (with a button in the upper right corner).
2. In the middle tab ("Selection"), delete every icon.
3. Import by dragging the /assets/selection.json file. This will import all the icon font in IcoMoon.
4. Use IcoMoon interface to update the icon font.
5. Select all the icon and click on the "Generate Font" tab.
6. Click on the button "Download" and unarchive the resulting zip file.
7. Replace the previous /assets/selection.json with the selection.json in the resulting archive.
8. Replace the previous /ios/Fonts/icomoon.ttf with the icomoon.ttf in the resulting archive.
9. Replace the previous /android/app/src/main/assets/fonts/icomoon.ttfwith the icomoon.ttf in the resulting archive.
10. Commit and enjoy