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

ikonograph

v5.0.1

Published

Icons library by Contactlab

Downloads

49

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

gabdevxgabdevxcontactlab-developercontactlab-developerstefano_magrassistefano_magrassi

Keywords

contactlabiconslibrary

Readme

NPM Downloads

Ikonograph is the official Contactlab icons library. You can use it as npm dependency, you have just to import the css file and you can start to add icons everywhere. You can see all available icons HERE.

Installation

Download the .zip package or install via a package manager (Yarn or NPM):

$ npm install ikonograph --save

Quick use

You can use Ikonograph as svg sprite or web component.

SVG Sprite

You can choose to use the svg-sprite version of Ikonograph. SVG sprite is a set of svg symbols that you can import and use inside your html, read about icon fonts vs svg .

There is 2 ways to use the SVG sprite:

As external resource

This is the new way to use svg-sprite icons, you don't have to include the sprite content inside your page, just link the source file inside the <use> tag:

<svg width="24" height="24">
  <use xlink:href="path/to/ikonograph.svg#agenda"></use>
</svg>

By inclusion (the old way)

You have to grab the ikonograph.svg file content and put it inside your main html file, just after the <body> tag.

<div style="display: none">
  <svg xmlns="http://www.w3.org/2000/svg"><!-- rest of the content--></svg>
</div>

NOTE: You have to put the content inside an hidden container to avoid the blank space.

You can now add icons everywhere:

<svg width="24" height="24">
  <use xlink:href="#[icon-name]"></use>
</svg>

Web Component iconset

Import the ikonograph.js component inside your file:

<script src="path/to/ikonograph/dist/ikonograph.js">

Use the ikn-icon element to display the icon by adding the icon name:

<ikn-icon icon="agenda" size="24px"></ikn-icon>

In browsers that don't support Shadow DOM (Firefox or Edge), or, if you are using the polyfill, it isn't possible to update attribute values ​​dynamically without a page reload.

As js module

You can also use ikonograph as js module inside your bundler by importing it:

import 'ikonograph/dist/ikonograph';

How to use & Documentation

For detailed instruction on how to use the Ikonograph library and the available icons refer to the Contactlab Pattern Library documentation.

Git branching policies

Any feature/bug fixing/refactor must be developed on a feature branch derived from the develop branch and integrate the changes through a pull request to have a code review.

License

Released and distributed under the Apache 2.0 license.