This article shows how to add new UI icons to the censhare product.

Prerequisites

Before adding or replacing icons, pull the latest changes from the censhare product git repository.

IcoMoon

  • Open IcoMoon.
  • To import existing icons, do the following:
    • Click “Import Project”
    • Upload censhare-Client5/tools/ui-resources/cs-icons.json
    • Click “Load” on the “cs-icons” project
  • To add new icons, do the following:
    • Open the hamburger icon menu in the “censhare Icons” section
    • Choose “Import to Set”
    • Upload SVG icon(s)
    • Adjust the class and tag name of the new icon(s) by using the edit pencil
    • Select new icon(s) to be actively selected
  • To download files, do the following:

    • For font files, click on “Generate Font” at the bottom, then on appearing click “Download”

      Make sure to write down or remember the Unicode code-points underneath the newly added icons. You need these later.

    • For the project JSON file, click the “cs-icons” link at the top right, then on the “Download” link of the “cs-icons” project

Source code

  • To add files, do the following:
    • Overwrite the existing censhare-Client5/tools/ui-resources/cs-icons.json file with the newly downloaded one
    • Unzip the downloaded font files and overwrite the fonts in censhare-Client5/web/styles/fonts/
    • Add the SVG icon(s) file to censhare-Client5/tools/ui-resources/icon-font/svgs-censhare-icons/
  • To adapt content, do the following:
    • Add the new icon class(es) to censhare-Client5/web/sass/_cs-icons.scss, using the generated Unicode code-points from IcoMoon
    • Change the hash value in the Sass file ($font-icon-hash, Format: YYYYMMDD)
    • Add the new icon(s) to the censhare-Client5/web/styleguide/csNewStyleguideFrame.js file in this array: $scope.allCsIconClasses
  • To check the result, to the following:
  • Commit and push your changes. The commit comprises at least 8 files:
    • _cs-icons.scss
    • cs-icons.json
    • cs-icons.eot
    • cs-icons.svg
    • cs-icons.ttf
    • cs-icons.woff
    • csStyleguideFrame.js
    • SVG icons

Tips & hints

  • Use censhare-Client5/tools/ui-resources/icon-font/cs-icons_template.svg as your basic template.
  • Keep 1px padding at the edges.
  • Let the path stop before an outer grid line, otherwise, antialiasing can occur that blurs the icon.
  • Take a look at View > Pixel Preview in Adobe Illustrator while creating the icon (the preview considers the default size of the icons next to our default font-size)
  • When you save the SVG in Illustrator, make sure to disable the option Responsive (Illustrator has some bugs with SVG viewbox positioning)
  • When you save the SVG in Illustrator, change the numbers of decimals to a minimum of 3. This is more accurate than the default 1.
  • Export the fonts from IcoMoon with EM Square Height of 1024 (Preferences > Font Metrics). Smaller sizes have cropping issues on macOS/Chrome.
  • If you export SVGs from IcoMoon, be sure to use Override Size with 16px (in Preferences). This ensures that icons are not altered to our standard template size (16px* 16px). All icons in our IcoMoon file must be available as SVGs in the ui-resources folder.