@nib-styles/v2-icons NPM

v2-icons

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.

Designing a new icon

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

Naming a new icon

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

Adding a new icon

Add your *.svg to the icons/ directory

Install the nodejs modules required for building:

npm install

Run the build script:

gulp

Test

Open the dist/listing.html file. It will take a while to load.

Use cases

The above rules were chosen in order to meet the following use cases:

Inline with text

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 height will look smaller than those that are full height.

Horizontal list

Icon in a button

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).

Vertical list

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.

Change log

3.4.1

Add: Font-display to @font-face to make text visible while the font is loading

3.4.0

Add: glasses, smiley and arm-around-shoulder icons

3.3.0

Add: hospital-building and paper-plane icons

3.2.0

Add: clipboard and receipt-with-inverse-plus icons

3.1.0

Add: travel-bag icon

3.0.0

move font-family to its own mixin so its not repeated in CSS each time the mixins are @imported
change the sass-composer main file to the mixins.scss rather than compiled.scss
fix lightgrey color to be standard https://github.com/nib-styles/v2-icons/issues/18
turn off italics so the icon doesn't look skewed https://github.com/nib-styles/v2-icons/issues/17