npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nib-styles/v2-icons

v3.4.1

Published

Icon font for nib.

Downloads

363

Readme

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

Icon in a button

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

2.12.1

  • Add: credit-card icon

2.11.0

  • Add: PDF icon
  • Add: certificate icon

2.8.0

  • Add: added ./dist/metadata.js: generated metadata for use in JS