Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    ceri-iconpublic

    ceri-icon

    webpack based - load only what you need - svg inline icons.
    See ceri-flag if you need a svg inline flag.

    Features:

    • plain JS - no dependencies
    • 21kB unzipped - even smaller when using multiple ceri components

    supports:

    If you need other free icon sets, let me know..

    Demo

    heavily inspired by vue-awesome.

    Change in 0.2

    • ceri-icon is now a webpack plugin instead of a loader.
      See changed (easier) usage instruction below.
    • initial optimiziation of icons is way faster on multi-core machines.

    Install

    npm install --save-dev ceri-icon

    Usage

    // webpack.config.js
    Icons = require("ceri-icon")
    ...
    module.exports = {
      ...
      plugins:[
        ...
        new Icons(["fa-heart","gly-heart"])
        ...
      ]
      ...
    }
    • in your project
    window.customElements.define("ceri-icon"require("ceri-icon"))
    <ceri-icon name="fa-heart"></ceri-icon>

    For examples see dev/.

    Props

    Name type default description
    name String - (required) name of the icon
    flip-v String - apply vertical flipping
    flip-h String - apply horizontal flipping
    offset-x Number 0 move the icon left/right within its borders in percentage (relative to the center)
    offset-y Number 0 move the icon up/down within its borders in percentage (relative to the center)
    label String name aria-label
    size Number (font-size) height of the icon in px
    scale Number 1 size multiplier
    hcenter Boolean false sets the height to equal the parentElement and moves the icon to the center

    Icon stack

    <ceri-icon name="fa-camera">
      <ceri-icon name="fa-ban" style="color:red" scale=2></ceri-icon>
    </ceri-icon>

    offset-x and offset-y on nested ceri-icon increase the size of the icon boundaries, so both will stay fully visible. The parent ceri-icon will be positioned in the center of the, then larger, boundaries.

    Spinners

    ceri-icon comes without css, so no spinning included, you can do it manually by adding this css to your website.

    /* css */
    .spin {
      animation: spin 1s 0s infinite linear;
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    <ceri-icon name="fa-spinner" class="spin"></ceri-icon>

    Development

    Clone repository.

    npm install
    npm run dev

    Browse to http://localhost:8080/.

    License

    Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

    install

    npm i ceri-icon

    Downloadsweekly downloads

    50

    version

    0.2.3

    license

    MIT

    homepage

    github.com

    repository

    githubgithub

    last publish

    collaborators

    • avatar