granite-icons

This package includes icon font files and related css files for granite icons. Currently two types of icon fonts are supported.

• Ligature based
• Glyph based

How to import

// For ligature based icons
@import '@ifsworld/granite-icons/assets/fonts/ligature/granite-iconfont-liga.css';

// For legacy glyph based icons
@import '@ifsworld/granite-icons/assets/fonts/glyph/granite-iconfont-glyph.css';

General Usage

<!-- For ligature based icons -->
<div class="granite-icon">alert</div>

<!-- For legacy glyph based icons -->
<div class="granite-icon icon-phone"></div>

Usage with granite-icon

<!-- For ligature based icons -->
<granite-icon>alert</granite-icon>

<!-- For legacy glyph based icons -->
<granite-icon fontIcon="icon-phone"></granite-icon>

All Icons

For a list of all icons, refer the storybook static build.

Adding icons to granite-icons

In order to add new icons or to change existing icons in granite-icons packages (both npm and nuget), the related svg files should be added to /assets/icons folder. However, to maintain a single source of truth for granite-icons, the process of adding the svgs to /assets/icons folder is also automated. Granite-Icons figma file will act as the single source of truth. Once you add a new icon to this file (of course with a help of a ux-designer), all you have to do is fetch the icons with npm run fetch-icons and commit the changes.

If you follow semantic-versioning guidelines when committing, the packages will be automatically published in the bitbucket pipelines.

Quality assuring the granite-icons generation process

Since most of the icon font generation process is automated, we need to make sure that the granite-icons packages keep working as expected. We run cypress snapshot testing to verify the changes that we make doesn't break the existing behavior. Therefore, ideally when you add/change an icon, the automated e2e tests in the pipeline should fail.

To avoid these failures, image snapshots should be updated locally and it should be verified manually that the diff you see represents only the change you have made. To run the tests locally run cypress:granite-icons-demo:snapshots command and if there is a diff, it will be shown in the cypress/snapshots/__diff_output__ folder. If this diff makes sense, update the snapshots with cypress:granite-icons-demo:snapshots:update command and commit the snapshot changes along with the icons.