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

zmp-icons

v1.0.0

Published

Free iOS-icons font for ZMP

Downloads

5

Readme

ZMP Icons

The premium and free iOS-icons font for ZMP.

The font is developed to be used with ZMP, but you can use it wherever you see it fits, personal or commercial. It is free to use and licensed under MIT.

Getting Started

  1. Download and extract the font pack

  2. Copy the zmp-icons.css to your project or add this CSS to your own CSS file:

    @font-face {
      font-family: 'ZMP Icons';
      font-style: normal;
      font-weight: 400;
      src: url("../fonts/ZMPIcons-Regular.eot");
      src: local('ZMP Icons'),
         local('ZMPIcons-Regular'),
         url("../fonts/ZMPIcons-Regular.woff2") format("woff2"),
         url("../fonts/ZMPIcons-Regular.woff") format("woff"),
         url("../fonts/ZMPIcons-Regular.ttf") format("truetype");
    }
    
    .zmp-icons {
      font-family: 'ZMP Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 28px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-feature-settings: "liga";
      -moz-font-feature-settings: "liga=1";
      -moz-font-feature-settings: "liga";
      font-feature-settings: "liga";
    }
  3. Copy the fonts folder to your project

  4. Ensure the font urls within zmp-icons.css properly reference the fonts path within your project.

  5. Include a reference to the zmp-icons.css file from every webpage you need to use it:

    <link rel="stylesheet" href="path/to/zmp-icons.css">

Or with component:

$ component install tukida/zmp-icons

Or with bower:

$ bower install zmp-icons

Or with npm:

$ npm install zmp-icons

Webpack

When using webpack, you must add loaders for css and fonts.

{ test: /\.css/, loader: 'style-loader!css-loader' },
{ test: /\.(woff|woff2|eot|ttf)$/, loader: 'url-loader?limit=100000' },

Then you can import the module like so:

import 'zmp-icons';

HTML Example

You can use ZMP or included cheatsheet.html file to easily find the icon you want to use. It’s easy to incorporate icons into your web page. Here’s a small example:

<i class="zmp-icons">house</i>

This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.

Styling Icons

Sizing

ZMP Icons look best at 28px, but if an icon needs to be displayed in an alternative size, just use CSS font-size rule:

.size-14 { font-size: 14px }
.size-28 { font-size: 28px }
.size-32 { font-size: 32px }
.size-56 { font-size: 56px }
<i class="zmp-icons size-14">house</i>
<i class="zmp-icons size-28">house</i>
<i class="zmp-icons size-32">house</i>
<i class="zmp-icons size-56">house</i>

Coloring

Using the icon font allows for easy styling of an icon in any color.

.color-black { color: #000 }
.color-white { color: #fff }
<i class="zmp-icons color-black">house</i>
<i class="zmp-icons color-white">house</i>

Using in data- attributes

Add the following CSS rule:

.zmp-icons[data-icon]:before {
    content: attr(data-icon);
    color: inherit;
}

And now you can use it with data- attributes:

<i class="zmp-icons" data-icon="house"></i>

Build Instructions

This repo already comes with all the files built and ready to go, but can also build the fonts from the source. Requires Python, FontForge and woff2:

  1. Install FontForge, which is the program that creates the font files from the SVG files:

    $ brew install fontforge ttfautohint

  2. Install woff2

    $ git clone --recursive https://github.com/google/woff2.git $ cd woff2 $ make clean all

  3. Add or subtract files from the src/ folder you'd like to be apart of the font files.

  4. Run the build command:

    python ./build/generate.py

License

ZMP Icons font is licensed under the MIT license.