Current version: 2.4.375
Date: March 25, 2017

Thank you for the purchasing of LivIcons Evolution for WordPress!
If you have any questions that are beyond the scope of this help file, please feel free to email via the contact form on my profile page on CodeCanyon.
If you like these script please rate it with Thanks so much!

  1. Given the version number is MAJOR.MINOR.NUMBER_OF_ICONS
    Despite version numbers of this WordPress plugin and a Jquery 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.

  1. In your WordPress Dashboard navigate to Plugins > Add New. Click Upload on top, browse for the livicons-evolution-X.X.XXX.zip file and click Install Now. After installation is complete click Activate Plugin. Plugin is now installed and activated.
  2. Click 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.
NOTE

Every option has its own description. Please carefully read them to define options are right for your project.

THE MAIN

It's recommended to set default Visualization and Animation Options only once according to your preferred icons style (how they look and are animated) and after that you may use a LivIcons shortcodes without excess options. Every omitted option will be taken from these defaults.

Via standard dialog

NOTE

Unlike jQuery plugin version of LivIcons Evolution, the WordPress one has integrated Configuration Tool - the WYSIWYG icons customizer, which let you get your icons in an easy way.

The plugin adds the "Add LivIcon" button above your TinyMCE editor:


After clicking the "Add LivIcon" the dialog box will appear:


Choose a desired icon and click it. You will be transfered to customization settings:

Every option has its own description and you can get it by click the "question" icon near by it.


After finishing changes click "Shortcode" button and the resulting shortcode will be inserted into your editor:

NOTE

Check "Only different from defaults" if you want to place a shortcode with limited list of options. But please keep in mind that if you change default options on a Setting page of the plugin in a future, your icons can change their appearance and behavior too.

In general, this configuration tool lets you get not only a shortcode, but a clean HTML and JavaScript code too, for any customization or for using LivIcons Evo via programmatic API.

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"

This section is for experienced users or developers, who want to use LivIcons Evolution via programmatic API, which is described later in this documentation.

All the default options are saved in the /wp-content/plugins/livicons-evolution/assets/js/LivIconsEvo.WP.defaults.js file.

The highest priority is given to options are set via a JavaScript code inside methods like .addLiviconEvo( options ). After that the script checks for options in the HTML5 data-attribute data-options. And the last it checks for default options from the default_options object.

option type value default description

The visualization options

pathToFolder string path to folder with all LivIcons is_set_by_plugin This option is set by WP plugin itself during its activation. And, basically, you don't need to change it.
name string SVG file name 'bell.svg' Any SVG file name for an icon from the /wp-content/plugins/livicons-evolution/assets/svg/ folder. For example 'bell' or 'bell.svg'. You may omit the .svg extension.
bell.svg print-image magic.svg
style string original
solid
filled
lines
lines-alt
linesAlt
'original' The one of the five (5) possible styles ('lines-alt' and 'linesAlt' are the same).
original lines solid linesAlt filled
size string value in px or % '60px' A desired value in pixels or %.
Also can be controlled by an external style sheet for different media queries for example. Please look at the end of /wp-content/plugins/livicons-evolution/assets/css/LivIconsEvo.WP.css file.
30px 60px 50% 100%
strokeStyle string original
round
square
'original' Controls how strokes will look like.
round square
strokeWidth string or numeric original
or pixels
'original' The stroke width of shapes. Leave it 'original' or set any numeric value in pixels.
original 1px 6px
tryToSharpen boolean true
false
true Apply or not a micro shift of SVG shapes to try to make them more sharp (crisp).
However, sometimes for different icon size it's better to set it to false
true false
rotate string or numeric none
[0 ... 360]
'none' The 'none' or any desired value in deg from range 0 ... 360.
none 315
flipHorizontal boolean true
false
false true will flip an icon horizontally.
true false
flipVertical boolean true
false
false true will flip an icon vertically.
true false
strokeColor string HEX code '#82CEF9' The stroke color of SVG shapes. Takes effect when style option is set to either 'filled' or 'lines' or 'lines-alt' or 'linesAlt'.
strokeColorAction string HEX code '#e74c3c' Take effect when colorsOnHover or colorsWhenMorph options are set to 'custom' and style option is either 'original' or 'filled' or 'lines'.
strokeColorAlt string HEX code '#E67E22' The alternative stroke color of SVG shapes. Takes effect when style option is set to either 'lines-alt' or 'linesAlt'.
strokeColorAltAction string HEX code '#34495e' Take effect when colorsOnHover or colorsWhenMorph options are set to 'custom' and style option is 'lines-alt' or 'linesAlt'.
fillColor string HEX code '#d4ebf9' The fill color of SVG shapes. Takes effect when style option is set to 'filled'.
fillColorAction string HEX code '#34495e' Take effect when colorsOnHover or colorsWhenMorph options are set to 'custom' and style option is either 'original' or 'filled'.
solidColor string HEX code '#999999' The main color of SVG shapes when style option is set to 'solid'.
solidColorAction string HEX code '#000000' Take effect when colorsOnHover or colorsWhenMorph options are set to 'custom' and style option is 'solid'.
solidColorBg string HEX code '#ffffff' The color of a background element on your page, on which an icon will appear. Takes effect when style option is set to 'solid'.
solidColorBgAction string HEX code '#ffffff' Take effect when style option is 'solid'. This option is useful when the background element (on which a LivIcon lays) changes its color on hover event too.
colorsOnHover string none
lighter
darker
custom
hue0 ... hue360
'none' The one of the five (5) possible effects. For example, 'hue180' will change an icon's colors around 180 deg of a color wheel.
none lighter darker custom hue180
colorsHoverTime numeric seconds 0.3 The duration of changing colors, when colorsOnHover option is not set to 'none'.
colorsWhenMorph string none
lighter
darker
custom
hue0 ... hue360
'none' For morph icons only! The one of the five (5) possible effects. For example, 'hue180' will change a morph icon's colors around 180 deg of a color wheel.
none lighter darker custom hue180
brightness numeric factor 0.10 The factor (multiplier) of changing colors' brightness, when colorsOnHover or colorsWhenMorph options are set to 'lighter' or 'darker'.
saturation numeric factor 0.07 The factor (multiplier) of changing colors' saturation, when colorsOnHover or colorsWhenMorph options are set to 'lighter' or 'darker'.
morphState string start
end
'start' For morph icons only. The initial state of morph icon.
start end start end
morphImage string none
or a URL
'none' For background morph icons only! Backgrounds morph icons can have an image (JPG, PNG, GIF, SVG) inside them. For example, avatars or photos of your users can be placed inside "morph-square-sticker.svg" icon. A URL can look like 'http://www.your_site.com/path/to/user_avatar.jpg'.
path/to/image.jpg path/to/image.svg
allowMorphImageTransform boolean true
false
false For morph icons only! If true the inside image will rotate and/or flip with a morph icon together.
rotated and
true
rotated and
false
strokeWidthFactorOnHover string or numeric none
or numeric value
'none' 'none' or numeric value. Take effect on mouse hover event. For example, to increase stroke width twice set the option to 2.
2 0.333
strokeWidthOnHoverTime numeric seconds 0.3 The duration of changing stroke width when strokeWidthFactorOnHover option is set to not 'none'.
keepStrokeWidthOnResize boolean true
false
false true will keep the the stroke width of shapes when the strokeWidth option is not set to 'original'.
Takes effect when and if an icon's size are changed with, for example, "resize" or "orientationchange" event.

The animation options

animated boolean true
false
true If false, an icon is static.
eventType string none
hover
click
'hover' If 'none' an icon can be still animated with JavaScript method .playLiviconEvo().
eventOn string self
parent
grandparent
#some_id
.some_class
'self' "Hover" and "click" events can be bind not only on an icon itself ('self' value), but on 'parent', 'grandparent' or any other element with #some_id or .some_class on your page.
self parent grandparent #hover_me
autoPlay boolean true
false
false Please be careful with true value, especially with "looped" animations.
delay numeric seconds 0 The delay in seconds before an animation starts.
duration string or numeric default
or seconds
'default' The total duration of an animation in seconds. The 'default' value is different for each icon and is stored in SVG icon files themselves in the 'data-animoptions' attribute.
repeat string or integer default
loop
or number
'default' The total number of an animation repeats. The 'default' value is different for each icon and is stored in SVG icon files themselves in the 'data-animoptions' attribute. This option does not take effect on morph icons.
Please be careful with 'loop' value.
repeatDelay string or numeric default
or seconds
'default' The delay in seconds between repeats. The 'default' value is different for each icon and is stored in SVG icon files themselves in the 'data-animoptions' attribute. This option does not take effect on morph icons.
drawOnViewport boolean true
false
false If true, an icon will be "drawn" when it appears a first time in a browser viewport.
true false
viewportShift string none
one-half
oneHalf
one-third
oneThird
full
'oneHalf' Take effect when drawOnViewport is set to true. It means that animation starts only if SVG is in a users browser's viewport at least the given value, calculated from SVG height.
drawDelay numeric seconds 0 The delay in seconds before a "drawing" animation starts.
drawTime numeric seconds 1 The duration in seconds for a "drawing" animation of each icon's shape.
drawStagger numeric seconds 0.1 The delay in seconds for a "drawing" animation for each icon's shape.
0.3 0
drawStartPoint string start
middle
end
'middle' The starting point from where a "drawing" animation starts for each icon's shape.
start middle end
drawColor string same
or HEX code
'same' The color for "drawing" lines.
same blue red
drawColorTime numeric seconds 1 The duration in seconds for a changing colors when a "drawing" animation ends.
drawReversed boolean true
false
false true will reverse the order of shapes drawing.
drawEase string or object ease value 'Power1.easeOut' The easing function according to GreenSock Ease Visualizer.
eraseDelay numeric seconds 0 The delay in seconds before an "erasing" animation starts.
eraseTime numeric seconds 1 The duration in seconds for an "erasing" animation of each icon's shape.
eraseStagger numeric seconds 0.1 The delay in seconds for an "erasing" animation for each icon's shape.
eraseStartPoint string start
middle
end
'middle' The starting point from where an "erasing" animation starts for each icon's shape.
eraseReversed boolean true
false
true true will reverse the order of shapes erasing.
eraseEase string or object ease value 'Power1.easeOut' The easing function according to GreenSock Ease Visualizer.
touchEvents boolean true
false
false Apply or not special events handlers (touchstart and touchend) for touch devices.
This option is highly experimental! It prevents default action of the events.
Please carefully test before using on a production site.

Callback functions (using via programmatic API only!)

beforeAdd function function
or false
false Is fired before a LivIcon is added first time on a page. Works inside .addLiviconEvo() method.
afterAdd function function
or false
false Is fired after a LivIcon is successfully added first time on a page. Works inside .addLiviconEvo() method.
beforeUpdate function function
or false
false Is fired before a LivIcon is updated. Works inside .updateLiviconEvo() method.
afterUpdate function function
or false
false Is fired after a LivIcon is successfully updated. Works inside .updateLiviconEvo() method.
beforeRemove function function
or false
false Is fired before a LivIcon is removed. Works inside .removeLiviconEvo() method.
afterRemove function function
or false
false Is fired after a LivIcon is removed. Works inside .removeLiviconEvo() method.
beforeDraw function function
or false
false Is fired before a LivIcon is drawn. Works inside .drawLiviconEvo() method.
afterDraw function function
or false
false Is fired after a LivIcon is drawn. Works inside .drawLiviconEvo() method.
duringDraw function function
or false
false Is fired during a LivIcon is being drawn. Works inside .drawLiviconEvo() method.
Function is fired a lot of times, so please be careful.
beforeErase function function
or false
false Is fired before a LivIcon is erased. Works inside .eraseLiviconEvo() method.
afterErase function function
or false
false Is fired after a LivIcon is erased. Works inside .eraseLiviconEvo() method.
duringErase function function
or false
false Is fired during a LivIcon is being erased. Works inside .eraseLiviconEvo() method.
Function is fired a lot of times, so please be careful.
beforeAnim function function
or false
false Is fired before a LivIcon's animation is started. Works inside .playLiviconEvo() method.
afterAnim function function
or false
false Is fired after a LivIcon's animation is finished. Works inside .playLiviconEvo() method.
duringAnim function function
or false
false Is fired when a LivIcon's animation is playing. Works inside .playLiviconEvo() method.
Function is fired a lot of times, so please be careful.

LivIcons Evolution has 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.

# Method Description
1 .addLiviconEvo() The main method. It creates a LivIcon inside a desired element on your page. Must be called first, all others methods - after it.
2 .updateLiviconEvo() Updates an already existing LivIcon with some new options for example. Even if a new name option is passed, the LivIcon will be updated instantly.
3 .changeLiviconEvo() Updates an already existing LivIcon through the erasing of an existing one and drawing (if drawOnViewport is not set to false) a new icon with new options (if any) for example. This method combines .eraseLiviconEvo, .updateLiviconEvo() and .drawLiviconEvo() in one command.
4 .drawLiviconEvo() Method to "draw" a LivIcon.
5 .eraseLiviconEvo() Method to "erase" a LivIcon..
6 .playLiviconEvo() Starts an icon's animation.
7 .stopLiviconEvo() Completely stops an animation and reset it to starting position.
8 .pauseLiviconEvo() Pauses an animation and doesn't reset animation position.
9 .resumeLiviconEvo() Resumes an animation from the current position.
10 .removeLiviconEvo() Removes a LivIcon from a container. Also a container itself can be removed too.
11 .liviconEvoState() For morph icons only. Gets a current morphState or sets it to 'start or 'end'.
12 .liviconEvoOptions() Method for getting all options assigned to a LivIcon. Returns undefined if no icon was created yet.

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');

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');

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');

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);

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);

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);

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

my_livicon.stopLiviconEvo();

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

my_livicon.pauseLiviconEvo();

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

my_livicon.resumeLiviconEvo();

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);

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');

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

my_livicon.liviconEvoOptions();

Version 2.4.375 (March 25, 2017)
-- Fixed an issue when WordPress is installed in a subdirectory
-- Added a compact view of a long LivIcons Evo shortcode inside Visual Composer
-- Updated GreenSock Animation Platform files with the latest versions
-- Updated SnapSVG lib with the latest version
-- Some code improvement of the main LivIcons Evo JS file for working with the latest version of SnapSVG
-- Added 5 new icons: collapse.svg, expand.svg, narrow-screen.svg, playlist.svg, wide-screen.svg
-- Fixed 4 icons: box.svg, box-add.svg, box-extract.svg, stopwatch.svg for working with the latest version of TweenMax

Version 2.3.370 (November 22, 2016)
-- Fixed an issue with cross origin request. From now the plugin works with sites via both (HTTP and HTTPS) protocols on one installation.

Version 2.2.370 (November 14, 2016)
-- Added 9 new icons: loader-16.svg, location-alt.svg, morph-bell.svg, morph-cloud.svg, morph-quality.svg, morph-sort-alt.svg, notebook.svg, priority-high.svg, priority-low.svg
-- Updated GreenSock Animation Platform with the latest version.
-- Fixed an issue with feature image
-- Some improvements for work with third party cache plugins

Version 2.1.361 (July 15, 2016)
-- Added 8 new "loader" icons (loader-8.svg ... loader-15.svg).
-- Made a universal main JS file for both versions (jQuery and WordPress) of the product.

Version 2.0.353 (July 07, 2016)
-- Initial Release of WordPress Plugin