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.

   html <link rel="stylesheet" href="https://github.com/bitshadow/iconate/raw/main/iconate.min.css"> <script type="text/javascript" src="https://github.com/bitshadow/iconate/raw/main/iconate.min.js"> 2. Create icon element.

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

   ```js var iconElement = document.getElementById('icon'); var options = { from: 'fa-bars', to: 'fa-arrow-right', animation: 'rubberBand' };

   iconate(iconElement, options); ```

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

| | | | | --- | --- | --- | --- | --- | 4+ ✔ | 16+ ✔ | 10+ ✔ | 15+ ✔ | 6+ ✔ |

License

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