iconate

    0.3.1 • Public • Published

    iconate.js

    A call to transform your existing icons in a cool trendy way

    iconate.js is a tiny performant library for cross-browser icon transformation animations in your projects.

    Demo

    Installation

    • NPM: npm install iconate
    • Bower: bower install iconate
    • Download zip.

    Note: iconate.js also supports AMD and commonJS module pattern.

    Basic Usage

    1. Include the Stylesheet and Javascript files in your html.

      <link rel="stylesheet" href="iconate.min.css">
      <script type="text/javascript" src="iconate.min.js">
    2. Create icon element.

      <i id="icon" class="fa fa-bars fa-lg"></i>
    3. Animate icon from fa-bar to fa-arrow-right with rubberBand animation.

      var iconElement = document.getElementById('icon');
      var options = {
          from: 'fa-bars',
          to: 'fa-arrow-right',
          animation: 'rubberBand'
      };
       
      iconate(iconElement, options);
    4. Following AnimationTypes can be used in iconate call.

      • rollOutRight
      • rollOutLeft
      • rubberBand
      • zoomOut
      • zoomIn
      • fadeOut
      • fadeOutRight
      • fadeOutLeft
      • fadeOutTop
      • fadeOutBottom
      • horizontalFlip
      • verticalFlip
      • bounceOutBottom
      • bounceOutTop
      • bounceOutLeft
      • bounceOutRight
      • rotateClockwise
      • rotateAntiClockwise
      • tada

    Public API

    iconate(element, [, options] [, callback] )

    Animate an icon element.

    • element - Icon Element to perform operations on.
    • options - Object containing options to control the animation.
      • from - Current icon class name (ex. 'fa-bars' in case of font-awesome)
      • to - Final icon class name (ex. 'fa-arrow-right')
      • animation - You can choose any animation from above listed animation types. (ex. 'fadeOutRight')(default: 'zoomOut')
    • callback - Optional callback to execute after animation completes.

    Browser Support

    Chrome Firefox IE Opera Safari
    4+ ✔ 16+ ✔ 10+ ✔ 15+ ✔ 6+ ✔

    License

    Copyright (c) 2015 Jignesh Kakadiya, http://bitshadow.github.io Licensed under the MIT license.

    Install

    npm i iconate

    DownloadsWeekly Downloads

    62

    Version

    0.3.1

    License

    MIT

    Last publish

    Collaborators

    • avatar