contactlab / Ikonograph
Programming Languages
Projects that are alternatives of or similar to Ikonograph
⚠️ This project is no longer mantained
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.