1.6.5 • Public • Published

    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.

    npm version

    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";



    npm i @tremorvideo/aikon

    DownloadsWeekly Downloads






    Last publish


    • tremorvideo