1. Overview of the pack

1. Given the version number is MAJOR.MINOR.NUMBER_OF_ICONS
   Despite version numbers of this WordPress plugin and a Jquery (JavaScript) part of this plugin, the main content (live icons themselves) is the same.

2. After downloading the item from CodeCanyon, you will find the following content in the archive:

   • documentation
   • livicons-evolution-X.X.XXX.zip

   documentation: As title said this is the documentation.

   livicons-evolution-X.X.XXX.zip, where X.X.XXX is an actual version number of the plugin. This file is a standard WordPress archive for uploading to your server.

3. Settings

After uploading you need to define plugin's settings.

Settings are consist of 6 parts:

1. General Settings
2. Visualization Options
   Here you can define how all LivIcons will look like by default.
3. Animation Options
   Here you can define how all LivIcons will be animated by default.
4. CSS & JavaScript
   Here you can save your custom CSS and Javasript code.
5. Product Activation
   By activating LivIcons Evolution license you will get access to direct plugin updates.
6. About
   Information about the plugin and links to external resources.

5. Visual Composer

In case you use Visual Composer plugin, you can get an access to LivIcons Evolution dialog box by clicking "LivIcon Evo" element in Visual Composer's "Add Element" dialog:

Please select (double click) "replace_me" text and hit "Add LivIcon" button:

As a result you will get a LivIcons Evo dialog box again. After finishing with a customization and pasting a ready shortcode, click "Save changes"

7. Programmatic API

LivIcons Evolution have powerful JavaScript methods to programmatic work with.

Programmatic API lets you use LivIcons not only when a document is ready, but with other events, such as window loaded, AJAX ones (success, done, etc.) and any others.

The using of .livicon-evo class name is not mandatory. Furthermore, it's recommended to use another class name via API to avoid double render of icons. Via API you can add, update, change, remove, play, pause, draw, erase etc. a LivIcon within any element on your page.

Methods are described in details below.

.addLiviconEvo( option, value )

Can take all the options and callback functions mentioned above in the 6. Options section of this documentation.

//you can assign your CSS selection to a variable.
var my_livicon = jQuery('#your_id_or_.your_class');

//a first creation with options as Object
my_livicon.addLiviconEvo({
    name: 'bell.svg',
    size: '120px',
    duration: 3,
    ... other options ...
    drawOnViewport: true
});

//Or a first creation with one option-value pair
my_livicon.addLiviconEvo('name', 'bell.svg');

.updateLiviconEvo( option, value )

Can take all the options and callback functions mentioned above in the 6. Options section of this documentation.

Please keep in mind that a new icon will have all previously options added earlier with a first creation.

//update an existing icon with new options as Object
my_livicon.updateLiviconEvo({
    name: 'pencil.svg',
    size: '33.33333%',
    duration: 'default'
});

//Or with one option-value pair
my_livicon.updateLiviconEvo('name', 'pencil.svg');

.changeLiviconEvo( option, value )

Can take all the options and callback functions mentioned above in the 6. Options section of this documentation.

Please keep in mind that a new icon will have all previously options added earlier with a first creation.

//erase an existing icon and draw a new one. Options are as Object.
my_livicon.changeLiviconEvo({
    name: 'pencil.svg',
    size: '33.33333%',
    drawOnViewport: true
});

//Or with one option-value pair
my_livicon.changeLiviconEvo('name', 'pencil.svg');

.drawLiviconEvo( option, value, force )

Can take only the options mentioned in the example below.

In general, the drawing animation doesn't start if icon is already tweening. The third argument force makes an instant drawing of icon's lines.

/*
Can take the following options:
drawDelay, drawTime, drawStagger, drawStartPoint, drawColor, drawColorTime, drawEase, drawReversed
And callback function:
beforeDraw, afterDraw, duringDraw
*/

//Drawing an icon. Options are as Object.
my_livicon.drawLiviconEvo({
    drawTime: 3,
    drawStagger: 0,
    drawEase: Bounce.easeOut
});

//Or with one option-value pair
my_livicon.drawLiviconEvo('drawTime', 3);

//With the "force" argument
my_livicon.drawLiviconEvo(true);
my_livicon.drawLiviconEvo({drawTime: 3, drawStagger: 0}, true);
my_livicon.drawLiviconEvo('drawTime', 3, true);

.eraseLiviconEvo( option, value, force )

Can take only the options mentioned in the example below.

In general, the erasing animation doesn't start if icon is already tweening. The third argument force makes an instant erasing of icon's lines.

/*
Can take the following options:
eraseDelay, eraseTime, eraseStagger, eraseStartPoint, eraseEase, eraseReversed
And callback function:
beforeErase, afterErase, duringErase
*/

//Erasing an icon. Options are as Object.
my_livicon.eraseLiviconEvo({
    eraseTime: 3,
    eraseStagger: 0,
    eraseEase: Bounce.easeOut
});

//Or with one option-value pair
my_livicon.eraseLiviconEvo('eraseTime', 3);

//With the "force" argument
my_livicon.eraseLiviconEvo(true);
my_livicon.eraseLiviconEvo({eraseTime: 3, eraseStagger: 0}, true);
my_livicon.eraseLiviconEvo('eraseTime', 3, true);

.playLiviconEvo( option, value, force )

Can take only the options mentioned in the example below.

In general, the new animation starts if icon is not tweening. The third argument force resets all icon's animations and starts a main one from the beginning.

/*
Can take the following options:
duration, delay, repeat, repeatDelay
And callback function:
beforeAnim, afterAnim, duringAnim
*/

//Start an animation. Options are as Object.
my_livicon.playLiviconEvo({
    duration: 'default',
    repeat: 'loop'
});

//Or with one option-value pair
my_livicon.playLiviconEvo('duration', 5);

//With the "force" argument
my_livicon.playLiviconEvo(true);
my_livicon.playLiviconEvo({duration: 0.5, repeat: 2}, true);
my_livicon.playLiviconEvo('duration', 3, true);

.stopLiviconEvo()

Doesn't take any arguments. Stops an animation and resets it to starting position.

my_livicon.stopLiviconEvo();

.pauseLiviconEvo()

Doesn't take any arguments. Pauses an animation on a current position.

my_livicon.pauseLiviconEvo();

.resumeLiviconEvo()

Doesn't take any arguments. Resumes an animation from a stopped position.

my_livicon.resumeLiviconEvo();

.removeLiviconEvo( option, value, total )

Can take only the options as 2 callback functions.

The third argument total removes the container with LivIcon (my_livicons in our example) too.

/*
Can take only callback function as options:
beforeRemove, afterRemove
*/

//Remove a LivIcon.
my_livicon.removeLiviconEvo({
    beforeRemove: function(){
        console.log('beforeRemove fired')
    }
});

//With the "total" argument
my_livicon.removeLiviconEvo(true);
my_livicon.removeLiviconEvo({
    beforeRemove: function(){
        console.log('beforeRemove fired')
    }
}, true);

.liviconEvoState( setter )

For morph icons only!

Can take only the one option with two possible values 'start' and 'end'.

//Getting the current state of morph LivIcon.
my_livicon.liviconEvoState();
//returns "start" or "end" for morph icons

//Setting the moprhState
my_livicon.liviconEvoState('end');

.liviconEvoOptions()

Doesn't take any arguments. Returns an Object with all saved options.

my_livicon.liviconEvoOptions();

Thank you!

Once again, thank you so much for purchasing this LivIcons Evolution WP Plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this package. No guarantees, but I'll do my best to assist. If you have a more general question relating to this product, you might contact me via my user page contact form here. And again if you like these plugin please rate it with 5 stars.

Best regards,
Dee