ikonograph
Advanced tools
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.
Download the .zip package or install via a package manager (Yarn or NPM):
$ yarn add ikonograph
$ npm install ikonograph --save
You can use Ikonograph by icon font, svg sprite or web component.
<link rel="stylesheet" href="path/to/ikonograph/dist/ikonograph.css">
Add the css ink-icon root class to your element and add the ikn-[name] css class to display the relative icon:
<span class="ikn ikn-users"></span>
If you don't want to use the icon font 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
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>
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>
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>
For detailed instruction on how to use the Ikonograph library and the available icons refer to the Contactlab Pattern Library documentation.
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.
Released and distributed under the Apache 2.0 license.
FAQs
Icons library by Contactlab
The npm package ikonograph receives a total of 12 weekly downloads. As such, ikonograph popularity was classified as not popular.
We found that ikonograph demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.