@tremorvideo/aikon

Component Aikon

It is Nokia spelled backwards. Aikon is SVG assets that comes from UX team. They should be cropped correctly and placed into svg directory. A font is then generated and be included as part of this repository.

Preparing for icons for Aikon

Aikon utilises fonts to display icons. Icons should come in SVG format. SVG images are compiled into icons using the web service Fontello.

Preparing SVG images in Inkscape

Font formats does not support all the features that the SVG format provides. Icons from Bo or Julia might not be in a format that fontello can immediately use. Therefore some preparation is required on the SVG files. Inkscape is an application which allows additional simplification of SVG images, such converting objects and strokes to paths. Get Inkscape from https://inkscape.org/en/download/

To cleanup an image for Fontello, excute the following steps in order:

1. Open the image in Inkscape (Ctrl+O)
2. Select all (Ctrl+A)
3. Object -> Ungroup (Shift+Ctrl+G)
4. Path -> Union (Ctrl+ + )
5. Path -> Combine paths (Ctrl+K)
6. File -> Clean up document (Alt+F -> U)
7. Save as -> Plain SVG

Before saving, please check that the icon still looks correct after applying all the steps above. If it doesn't, the image artwork itself might require some tweaking or simplification by Bo/Julia in order to make it useable for fonts.

Importing SVG images into Fontello

Load existing Aikon configuration

1. Go to www.fontello.com
2. Import existing aikon config

• Click the icon that looks like a spanner
• Click Import
• Select the config.json from the Aikon repository

Add new icons

1. Drag icon(s) directly into the Custom Icons area
2. Make sure the icons look correct
3. Include the new icons for generation by clicking them. An icon included for generation should habe a red circle around it

Optional steps

• Icons names can be customised on the Customize Names tab (fontello uses the icon filenames)
• The character used for the icon can be changed on the Customize Codes

Updating Aikon with webfonts from Fontello

Once you're done adding the new icons, click Download webfont to download the zip file of the font. You will need to do the following tasks

• Replace the config.json with the updated one from the zip file
• Replace the aikon.svg, aikon.ttf and aikon.woff in /less/fonts of the repository with the ones in the zip file
• Update the /less/index.less of the repository with the new icon classes (refer to aikon-embedded.css of the zip file for character code references)
• Put the original SVG files into /svg of the repository for reference
• Bump the version property in package.json
• Update the CHANGELOG.md
• Commit your changes to the Gitlab

Updating the Aikon NPM package

While in the root of the Aikon repository, execute the following commands:

1. Login to npm (Get credentials from Pey Lun or Yit Chun)

   npm login

2. Publish the update

   npm publish

Using aikon

Using npm:

npm i --save @tremorvideo/aikon

Consuming aikon

This is how you use, assuming that node_modules is in your LESS path:

@import "@tremorvideo/aikon/less/index.less";