Icon Library for Core Covisint UI Functionality
The CUI Icon library has curated a select set of icons that have specific meaning and purpose through the CUI visual language. These icons have been curated and prepared for use as SVG icons and tested across the variety of devices and browsers supported by the framework.
Additionally, you'll find the entire font-awesome library is available for use as SVG format as well.
It is super easy to use any of the icons in the library in your CUI project. You can simply use the cui-icon directive!
Or, just replace #covisint-logo with the name of your svg and set viewBox to your svg's size.
<svg class="cui-header__svg-logo" viewBox="0 0 640 124"><use xlink:href="node_modules/@covisint/cui-icons/dist/logos/logos-out.svg#covisint-logo"></use></svg>
Adding Icons to the Covisint UI Icon Library
- Add your icons to
src/resource/iconsdepending on what type of icon you're adding.
- Jenkins will run
grunt buildwhich will compile all the icons into 2 different output files -
dist/logos/logos-out.svg. These will be availabe to consumers of this library (
bower install --save cui-icons).
Your icons will need to follow a certain syntax to be accepted by the build task:
- No hardcoded fills (or it won't be customizable with css)
- All the paths should be wrapped in a group with an id equal to its filename. (everything outside of that group will be ignored)
Sometimes programs like Adobe Illustrator and Sketch do not export SVGs in the cleanest way, often leaving artifacts that are unnecessary at best and buggy at worst. Here are a few programs we use to clean up those exported SVGs:
- SVGOMG - This is essentially SVGO with a lovely interface (Big thanks to Jake Archibald!). We tried utilizing SVGO in the project via a Grunt task, but often had failures we had to manually clean up.
- Iconic's SVG Exporter Script - Adding this script to Illustrator streamlines the export process and class naming of paths for icon customization.