Icon font for nib.
<i class="v2-icon v2-icon--small v2-icon--lightgrey v2-icon--calendar"></i>
See the pattern library for a full list of available icons.
- Your icon MUST be a
*.svg - Your icon MUST be 64px by 64px
- Your icon MUST be black and white
- You SHOULD make use of the full height of the icon; if you absolutely can't make use of the full height of the icon then you MUST center the icon vertically - but vertically centered icons may look dodgey in one or two common use cases (see below)
- You MUST save your icon with these settings
- name the icon after what the image is, not what the function is
- if the icon is in a circle, use the suffix
-circle - if the icon is white on black, use the suffix
-inverse
Add your *.svg to the icons/ directory
Install the nodejs modules required for building:
npm install
Run the build script:
gulp
The above rules were chosen in order to meet the following use cases:
Where the center of an icon should be in line with the center of some text e.g. an icon in a button. For this to look good icons must be vertically centered or make use of the full height.
Where a number of icons are aligned to the top or bottom of a container e.g. a feature panel. For this to look good icons must all be the same height (preferably make use of the full height).
Where a number of icons are aligned to the left or right of a container. For this to look good icons must be horizontally centered or make use of the full width.