Transform your icons with trendy animations.

Related tags

Learning resource iconate
Overview

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.

Comments
  • Not working - ionicons

    Not working - ionicons

    first of all this is great plugin as far as i guess.Why i use guess you know it's not working for me.I have used ionicons for my project.After calling iconate css and js minified version.I have add

        var iconElement = document.getElementById('change');
var options = {
    from: 'ion-arrow-left-c',
    to: 'ion-arrow-move',
    animation: 'rubberBand'
};

iconate(iconElement, options);

    Until not working.Any idea. Thanks brother.

    opened by raselmahmud 6
  • rotateClockwise (rotateAntiClockwise) not working

    rotateClockwise (rotateAntiClockwise) not working

    Hi @bitshadow and thank you for your great job!

    I saw that in order to get my icons to rotate I had to start the rotation from 0% and not only on 100%. In your demo I see it working without this but as you can see it doesn't on my JSFiddle example

    My project consists of: jQuery v2.1.3 Materialize v0.97 (http://materializecss.com) Iconate v0.2.4

    My fix:

    @keyframes rotateClockwise {
    0% {
        opacity: 1;
        transform: rotateZ(0deg);
        transform-origin: center;
    }
    50% {
        opacity: 0;
        transform: rotateZ(180deg);
        transform-origin: center;
    }
    100% {
        transform: rotateZ(360deg);
        transform-origin: center;
        opacity: 1;
    }
}

@keyframes rotateAntiClockwise {
    0% {
        opacity: 1;
        transform: rotateZ(0deg);
        transform-origin: center;
    }
    50% {
        opacity: 0;
        transform: rotateZ(-180deg);
        transform-origin: center;
    }
    100% {
        transform: rotateZ(-360deg);
        transform-origin: center;
        opacity: 1;
    }
}
    opened by gkontokotsios 3
  • Remove moot `version` property from bower.json

    Remove moot `version` property from bower.json

    Per bower/bower.json-spec@a325da3

    Also their maintainer says they probably won't ever use it: http://stackoverflow.com/questions/24844901/bowers-bower-json-file-version-property

    opened by kkirsche 2
  • Inconsistent dropdown selection renders

    Inconsistent dropdown selection renders

    When i select map marker and i select dropdown and select fade left i can see asterix fading left. The concept of map marker is gone.

    How to reproduce:

    Select MapMarker Select Asterix Select FadeLeft

    opened by Rajdeepc 1
  • Light README grammar edit

    Light README grammar edit

    On line 2 I added a letter 'a' before 'cool.'

    ...icons in cool trendy way*

    is now

    ...icons in cool trendy way*

    On line 4 I added a letter 'a' before 'tiny.'

    `iconate.js` is tiny performant library

    is now

    `iconate.js` is a tiny performant library

    Thanks for the cool project!

    opened by jseiden 1
  • No jquery selectors compatibility

    No jquery selectors compatibility

    When instead of using 'document.getElementById('test')', you want to use jquery selector. It does not work and throw the following order : a.addEventListener is not a function.

    Should not be open to this kind of use ?

    opened by LoicGoyet 1
  • Fix broken headings in Markdown files

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    opened by bryant1410 0
  • allows to change an array of classes for the parameters of 'from' and 'to'.

    allows to change an array of classes for the parameters of 'from' and 'to'.

    hello, greetings and I hope you are well. I had the problem that I could only put one class and the solution I found is sending an array of classes. Thank you!

    opened by sejoalfaro 1
Owner
Jignesh Kakadiya
Jignesh Kakadiya
GitHub https://bitshadow.github.io/iconate
Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable.

Custom icon library Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable. Upon each Material Design

Marius 12 Dec 12, 2022
Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components.

Chakra UI Animations Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components. Installation yarn add @

Code Chemistry Inc. 9 Nov 19, 2022
Manipulate the AST to transform your code.

unplugin-ast Manipulate the AST to transform your code. Installation npm i unplugin-ast Vite // vite.config.ts import AST from 'unplugin-ast/vite' ex

三咲智子 32 Dec 3, 2022
Zenload - "Load couple loaders and apply transform one-by-one

Zenload Load couple loaders and apply transforms one-by-one. Install npm i zenload -g How to use? With env vairable ZENLOAD: NODE_OPTIONS='"--loader

coderaiser 1 Jan 25, 2022
🍱 Simple nodejs support for using icons!

?? node-icons Usage Checkout its unit tests to see complete usage with output! import Icons from "node-icons"; const icons = Icons({ // auto install

(TS/JS).Gandalf(he/him) 6 Dec 29, 2021
A typescript transform that converts exported const enums into object literal.

ts-transformer-optimize-const-enum A typescript transformer that convert exported const enum into object literal. This is just like the one from @babe

Fonger 22 Jul 27, 2022
An imports transform unplugin.

unplugin-transform-imports An imports transform unplugin based on babel inspired by babel-plugin-transform-imports. What unplugin-transform-imports Do

ViPro (京京) 7 Nov 29, 2022
Cloud function to generate basic icons, splash screens, and favicons.

Example: https://icogen.vercel.app/api/icon?color=white&padding=300&icon_id=1f1f1-1f1fa Can be used in Expo apps via app.json: { "expo": { "icon

Evan Bacon 13 Jan 2, 2023
You only need 5 icons to meet most needs!

pwa-icons-generator You only need 5 icons to meet most needs! Don't believe me? Check out this awesome article written by the author of PostCSS and Au

Евгений Епифанов 21 Aug 8, 2022
Transform URLs in strings to actual links.

Transform URLs in strings to actual links. It will find valid links in the given string and create <a> tags for it. Internally, it uses this Regex to

Prince Neil Cedrick Castro 7 Nov 4, 2022
A plugin for Strapi Headless CMS that provides the ability to transform the API request or response.

strapi-plugin-transformer A plugin for Strapi that provides the ability to transform the API request and/or response. Requirements The installation re

daedalus 71 Jan 6, 2023
Add icons to the AtCoder standings table according to ratings.

ac-rating-icon AtCoder のコンテスト順位表に、レーティングに対応したアイコンを追加するユーザースクリプトです。 アイデア元: https://twitter.com/e869120/status/1519310341024677888 灰色の細分化について 内部レート 0 以上

subaru 5 May 6, 2022
Transform and compose data for HTTP transactions.

Fragments Fragments is a platform to compose and manage custom data objects for HTTP transactions. Simply put, you can write simple jinja templates to

Artem Golub 15 Sep 6, 2022
🚀 Hero Icons for Flutjs

FLUT-HERO ⚔ Hero Icons for Flutjs Welcome! this package contains a set of icons widgets for Flutjs framework. All the svg source where made by the awe

Filipe Lukebana 2 Jun 16, 2022
a vscode extension for http response data auto transform ts type.

Api2ts 这是一个自动将 http 的响应数据转化为 ts 的类型，使用 json-to-ts 做的。 Features 框选配置项后，使用快捷键 alt+Q : 请求参数配置文件 在根目录下创建 Api2ts.config.json 文件，配置项如下： { "baseURL": "http

phy-lei 6 Jun 30, 2022
SVG icons for popular brands

Simple Icons Over 2200 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be ma

Simple Icons 14.7k Jan 1, 2023
jQueryFileExplorer Inspired by jQueryFiletree. Most of the icons in the images folder are from jQueryFiletree.

jQueryFileExplorer Inspired by jQueryFiletree. Most of the icons in the images folder are from jQueryFiletree. Split.js is included and used to provid

null 4 Oct 28, 2022
Basic styling to create calendar icons with pure HTML and CSS

Calendar Icon Basic styling to create calendar icons with pure HTML and CSS Usage Embed the CSS, and markup your date: <link type="text/css" rel="styl

null 1 Aug 23, 2022
CSS sprite to represent iOS shortcut icons

shortcut-icons A CSS sprite to represent iOS shortcut icons. Grab the stylesheet and the default (iOS 15) glyph set, and add a shortcut icon to your H

Antonio Bueno 18 Nov 14, 2022