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/
- Overwrite the existing
- 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
- Add the new icon class(es) to
- To check the result, to the following:
- Build the project and go to https://localhost.censhare.com:9443/censhare5/client/styleguide/styles/icons to check the correct output of all icons
- 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.