@coffeekraken/icon-webcomponent

Easily integrate icons using various driver like "img", "fonticon", "svg", "fontawesome", "material" and "foundation"

Usage no npm install needed!

<script type="module">
  import coffeekrakenIconWebcomponent from 'https://cdn.skypack.dev/@coffeekraken/icon-webcomponent';
</script>

README

Coffeekraken icon webcomponent

npm npm npm

Easily integrate icons using various driver like "img", "fonticon", "svg", "fontawesome", "material" and "foundation"

Table of content

  1. Install
  2. Get Started
  3. Drivers
  4. Global configuration
  5. Javascript API
  6. Coffeekraken

Install

npm install @coffeekraken/icon-webcomponent --save

Get Started

First, import the component into your javascript file like so:

import IconWebcomponent from "@coffeekraken/icon-webcomponent"

Then simply use it inside your html like so:

<ck-icon icon="address-book" driver="fontawesome"></ck-icon>
<ck-icon icon="my-cool-icon" driver="svg" icons-path="/icons"></ck-icon>

Drivers

Here the list of drivers available and how they work:

  1. fonticon : This driver assume that you have a fonticon in yout project.
  • Generate a <i> with class of icon-{icon}
  1. img : This driver create an <img> tag and load your svg icon inside it
  • Depend on the iconsPath property
  • Generate an <img> tag with the source {iconsPath}/{icon}.svg
  1. svg : This driver load the svg and put it inline in the page
  • Depend on the iconsPath property
  • Inline the svg loaded from {iconsPath}/{icon}.svg
  1. fontawesome : Load fontawesome and generate an <i> tag with the proper fontawesome class
  2. material : Load material icons and generate an <i> tag with the proper material class
  3. foundation : Load foundation icons and generate an <i> tag with the proper foundation class

Global configuration

In order to avoid writing each time driver="fontawesome" etc, you can configure your component globally one time then use it quicker. Here how to do that:

import IconWebcomponent from "@coffeekraken/icon-webcomponent/js/class"
IconWebcomponent.define('ck-icon', IconWebcomponent, null, {
  driver: 'foundation'
});

You can then use your component with ease like so:

<ck-icon icon="my-cool-icon"></ck-icon>

Coffeekraken

We are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose. All what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside...

Coffeekraken