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.
- Ensure your document profile has "Align New Objects to Pixel Grid" option unchecked in the Advanced section. NOTE: This will only work when creating a new illustrator document.
- 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
Open the dist/listing.html file. It will take a while to load.
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. Icons that are vertically centered rather than using the full 924C height will look smaller than those that are 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.
- Add: Font-display to @font-face to make text visible while the font is loading
- Add:
glasses,smileyandarm-around-shouldericons
- Add:
hospital-buildingandpaper-planeicons
- Add:
clipboardandreceipt-with-inverse-plusicons
- Add:
travel-bagicon
- move
font-familyto its own mixin so its not repeated in CSS each time the mixins are@imported - change the
sass-composermain file to themixins.scssrather thancompiled.scss - fix
lightgreycolor to be standard #18 - turn off italics so the icon doesn't look skewed #17
- Add:
credit-cardicon
- Add: PDF icon
- Add: certificate icon
- Add: added
./dist/metadata.js: generated metadata for use in JS