1.0.3 • Public • Published

    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


    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>


    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>


    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...



    npm i @coffeekraken/icon-webcomponent

    DownloadsWeekly Downloads






    Unpacked Size

    335 kB

    Total Files


    Last publish


    • olivierbossel