jQuery plugin - Documentation for LivIcons Evolution

Documentation

for the Jquery Plugin. The complete guide of how to use LivIcons Evolution.

Latest version: 2.9.387

Thank you for the purchasing of LivIcons Evolution for jQuery!
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!

Given the version number is MAJOR.MINOR.NUMBER_OF_ICONS
If in any update of this product the NUMBER_OF_ICONS only is changed you need to update SVG icons files only from the for_upload/LivIconsEvo/svg folder.
After downloading you will find the following folders in the archive:
- documentation
- for_develop
- for_upload
documentation: As title said this is the documentation.

for_develop: This folder contains only one JavaScript file: LivIconsEvo.src.js, which is a non-minified version of the main script for any of your customization.

for_upload: This one is for uploading to your server (except samples files). The folder contains all the necessary files in a minified form to reduce your bandwidth and loading time.

Note:

LivIcons Evolution pack uses GreenSock Animation Platform files (TweenMax, DrawSVGPlugin, and MorphSVGPlugin) as a part of its functionality. That Platform has its own license rules. Please pay attention that:

Users of LivIcons Evolution are not allowed to include the DrawSVG and MorphSVG plugins in any public repositories
If users of LivIcons Evolution want to use DrawSVG or MorphSVG plugins outside of the use of LivIcons Evolution, they should get their own Shockingly Green or Business Green Club GreenSock membership
If users of LivIcons Evolution are selling a product that contains LivIcons Evolution to multiple clients, then they need the commercial license that comes with their Business Green Club GreenSock membership

Open the LivIconsEvo.defaults.js file from the for_upload > LivIconsEvo > js folder in preferred text editor (not in MS Word!).
Adjust the default options inside defaultOptions object, according to the information below. Especially please pay attention to the pathToFolder one. If you upload the LivIconsEvo directory to the root one on your server, the value of pathToFolder option should be either '/LivIconsEvo/svg/' or 'http://www.your_site.com/LivIconsEvo/svg/' or 'https://www.your_site.com/LivIconsEvo/svg/' if you're using encryption. The better way is to use a pure path from the root without specifying http(s) protocols. In this case your icons will work on subdomains too, for example, with or without "www". Save the file.
Upload to your server all the files and directories from the for_upload folder.
If you already use jQuery on your site do not upload it again.

After uploading you need to declare a CSS file in the <head> section (or just copy the styles from LivIconsEvo > css > LivIconsEvo.css file into your existing style sheet) and JavaScript files before the closing </body> tag in your HTML page's code.

NOTE

It's recommended to place JS declarations before the closing </body> tag at the end of your HTML document, not inside a <head></head> section.

JavaScript declarations can be done in the two (2) ways:

EITHER

If you already use any components of GreenSock animation pack, include only the missing ones.

<head>
    ...
    <!-- all your other CSS files go here-->
    ...
    <link href="LivIconsEvo/css/LivIconsEvo.css" rel="stylesheet">
</head>

<body>
    ...
    <!-- All your page's code goes here -->
    ...
    <script src="path/to/your_jQuery_copy.js"></script>
    ...
    <!-- Your other script files go here -->
    ...
    <script src="LivIconsEvo/js/tools/snap.svg-min.js"></script>
    <script src="LivIconsEvo/js/tools/TweenMax.min.js"></script>
    <script src="LivIconsEvo/js/tools/DrawSVGPlugin.min.js"></script>
    <script src="LivIconsEvo/js/tools/MorphSVGPlugin.min.js"></script>
    <script src="LivIconsEvo/js/tools/verge.min.js"></script>
    <script src="LivIconsEvo/js/LivIconsEvo.defaults.js"></script>
    <script src="LivIconsEvo/js/LivIconsEvo.min.js"></script>
</body>

The order of the declarations is important.

If you already use jQuery on your site do not declare it again. If not yet, please don't forget to edit the path/to/your_jQuery_copy.js

OR

You can declare only the one JS file LivIconsEvo.Tools.js, which contains all the necessary libraries.

<head>
    ...
    <!-- all your other CSS files go here-->
    ...
    <link href="LivIconsEvo/css/LivIconsEvo.css" rel="stylesheet">
</head>

<body>
    ...
    <!-- All your page's code goes here -->
    ...
    <script src="path/to/your_jQuery_copy.js"></script>
    ...
    <!-- Your other script files go here -->
    ...
    <script src="LivIconsEvo/js/LivIconsEvo.Tools.js"></script>
    <script src="LivIconsEvo/js/LivIconsEvo.defaults.js"></script>
    <script src="LivIconsEvo/js/LivIconsEvo.min.js"></script>
</body>

The order of the declarations is important.

If you already use jQuery on your site do not declare it again. If not yet, please don't forget to edit the path/to/your_jQuery_copy.js

Now you are ready to use LivIcons Evolution.

Via HTML5 data-attributes

You can use LivIcons Evolution purely through the markup API without writing a single line of JavaScript. In that case, when a document is ready, any <div> with class .livicon-evo will contain an icon according to options which are set in data-options attribute.

Prettified:

<div class="livicon-evo" data-options="
    name: bell.svg;
    size: 120px;
    style: original;

    ... other options ...

    tryToSharpen: true
"></div>

Compact:

<div class="livicon-evo" data-options="name: bell.svg; size: 120px; style: original; ... other options ...; tryToSharpen: true"></div>

All option-value pairs must be separated with one semicolon ; The description for all the available options can be found further in this document.

CONFIGURATION TOOL

The LivIcons Configuration Tool can help you to adjust any LivIcon here and get ready to use HTML and/or JavaScript code.
Note: this tool is not and will be not included in a downloaded pack with any version of LivIcons Evolution, it is available on-line at LivIcons.com only.

Via Programmatic API

Using class .livicon-evo is not mandatory. You can use any other ID or class name of your elements for adding LivIcons programmatic. In that case use jQuery method: .addLiviconEvo();

Prettified:

jQuery('#your_id_or_.your_class').addLiviconEvo({
    name: check.svg,
    size: 50%,
    style: lines,
    ... other options ...,
    tryToSharpen: true
});

Compact:

jQuery('#your_id_or_.your_class').addLiviconEvo({name: check.svg, size: 50%, style: lines, ... other options ..., tryToSharpen: true});

Programmatic API lets you use LivIcons not only when a document is ready, but with other events, such as window loading, AJAX ones (success, done, etc.) and any others. All the LivIcons Evolution methods are described further in this document.

CONFIGURATION TOOL

And again, the LivIcons Configuration Tool can help you to adjust any LivIcon here and get ready to use HTML and/or JavaScript code.

The highest priority is given to the 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 defaultOptions object.

option type value default description

The visualization options

pathToFolder string path to folder with all LivIcons 'REPLACE_ME!' Please set this option in the LivIconsEvo.defaults.js file itself.
If you upload the LivIconsEvo folder to the root directory of your server, the value of this option should be either '/LivIconsEvo/svg/' or 'http://www.your_site.com/LivIconsEvo/svg/' or 'https://www.your_site.com/LivIconsEvo/svg/' if you use an encryption.

name

string

SVG file name

'bell.svg'

Any SVG file name for an icon from the LivIconsEvo/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, %, em, etc.

'60px'

A desired value in pixels, %, ems, etc.
Also can be controlled by an external style sheet for different media queries for example. Please look at the end of for_upload > LivIconsEvo > css > LivIconsEvo.css file.


60px	100%	5em

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.

As it was said earlier, the using of .livicon-evo class name is not mandatory. You can add, update, change, remove, play, pause, draw, erase etc. a LivIcon within any element on your page.

Methods below are described in details.

#	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 5. 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 5. 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 5. 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();

jQuery team for outstanding work that makes our job easier.
Dmitry Baranovskiy, the author of Snap.svg library
GreenSock Animation Platform aka GSAP
Ryan Van Etten the author of Verge script
Without these talented people LivIcons Evolution could never be created. Thanks so much!

Version 2.9.387 (December 27, 2020) -- Added 8 new icons: albums.svg, asterisk.svg, barcode.svg, certificate.svg, ice-cream.svg, medkit.svg, qrcode.svg, and signal.svg -- Added possibility to animate Gaussian blur SVG filter. -- Made a fix for generating of unique numbers of internal icons' IDs -- For this update: - replace all JavaScript and CSS files with new ones from the "LivIconsEvo-2.9.387 > for_upload > LivIconsEvo" folder - copy the new SVG icons files from the "LivIconsEvo-2.9.387 > for_upload > LivIconsEvo > svg" folder

Version 2.8.379 (June 26, 2019) -- Fixed two icons: pen.svg, and brush.svg in a part of looped animations -- Some changes of the package contents to match "WordPress plugin requirements by Envato" because this script is used in a WordPress plugin

Version 2.7.379 (March 11, 2019) -- Updated GreenSock Animation Platform files with the latest versions. -- Made a fix for "eraseStagger" custom value -- Made some code changes to match "WordPress plugin requirements by Envato" because this script is used in a WordPress plugin -- Version 2.6.379 is skipped for synchronizing with WordPress version -- For this update: - replace all JavaScript and CSS files with new ones from the "LivIconsEvo-2.7.379 > for_upload > LivIconsEvo" folder

Version 2.5.379 (October 24, 2018) -- Added a fix for ForeFox error with "display:none" icons -- Made code syntax fix of 3 icons: narrow-screen.svg, scales.svg and wide-screen.svg -- For this update: - replace all JavaScript and CSS files with new ones from the "LivIconsEvo-2.5.379 > for_upload > LivIconsEvo" folder - copy new SVG icons files from the "LivIconsEvo-2.5.379 > for_upload > LivIconsEvo > svg" folder

Version 2.4.379 (May 22, 2018) -- Updated GreenSock Animation Platform files with the latest versions. -- Updated Verge script with the latest version. -- Added 4 new icons: cpu.svg, headphones.svg, radiation.svg, scales.svg -- For this update: - replace all JavaScript and CSS files with new ones from the "LivIconsEvo-2.4.379 > for_upload > LivIconsEvo" folder - copy new SVG icons files from the "LivIconsEvo-2.4.379 > for_upload > LivIconsEvo > svg" folder

Version 2.3.375 (March 25, 2017) -- 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 -- For this update: - replace all JavaScript and CSS files with new ones from the "LivIconsEvo-2.3.375 > for_upload > LivIconsEvo" folder - copy new and fixed SVG icons files from the "LivIconsEvo-2.3.375 > for_upload > LivIconsEvo > svg" folder

Version 2.2.370 (November 15, 2016) -- Updated GreenSock Animation Platform files with the latest versions. -- 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 -- For this update: - replace the file "LivIconsEvo.Tools.js" from the "LivIconsEvo-2.2.370 > for_upload > LivIconsEvo > js" folder - replace all JavaScript files from the "LivIconsEvo-2.2.370 > for_upload > LivIconsEvo > js > tools" folder - copy new icons files from the "LivIconsEvo-2.2.370 > for_upload > LivIconsEvo > svg" folder

Version 2.2.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. -- For this update, replace all JavaScript, SVG and CSS files with new ones from the "LivIconsEvo-2.2.361 > for_upload > LivIconsEvo" folder.

Version 2.1.353 (June 16, 2016) -- Updated GreenSock Animation Platform files with the latest versions. -- Improved the tryToSharpen option's calculation. -- Improved the CSS styles. From now any div.livicon-evo stays as a "block" element, but any span.livicon-evo becomes a "inline-block" element and can be easy alignment inside paragraph tag "<p>...</p>" as a usual text, for example. -- Added 8 new icons: apple.svg, camcoder.svg, clapboard.svg, grid.svg, label-hot.svg, label-new.svg, screenshot.svg, wifi.svg -- For this update, completely replace all JavaScript, SVG and CSS files with new ones from the "LivIconsEvo-2.1.353 > for_upload > LivIconsEvo" folder.

Version 2.0.345 (June 01, 2016) -- Added 10 new icons: file-export.svg, file-import.svg, morph-chevron-close.svg, morph-menu-arrow-bottom.svg, morph-menu-arrow-left.svg, morph-menu-arrow-right.svg, morph-menu-arrow-top.svg, morph-search-close.svg, morph-star.svg, servers.svg -- For this update just replace icons files with new ones from the "LivIconsEvo-2.0.345 > for_upload > LivIconsEvo > svg" folder.

Version 2.0.335 (May 24, 2016) -- Added 12 new icons: anchor.svg, british-pound.svg, euro.svg, hourglass.svg, morph-bookmark.svg, paper-plane.svg, satellite.svg, sky-dish.svg, two-pointers.svg, us-dollar.svg, wind.svg, wine-glass.svg -- For this update just replace icons files with new ones from the "LivIconsEvo-2.0.335 > for_upload > LivIconsEvo > svg" folder.

Version 2.0.323 (May 17, 2016) -- Added 8 new icons: building.svg, handcuffs.svg, idea.svg, more.svg, morph-menu-close-alt.svg, morph-thumbnails-close.svg, scroll.svg, scroll-alt.svg -- Fixed 1 icon: morph-checkbox-2.svg -- For this update just replace icons files with new ones from "LivIconsEvo-2.0.323 > for_upload > LivIconsEvo > svg" folder.

Version 2.0.315 (May 10, 2016) Initial Realize

“LivIcons Evolution for jQuery” Documentation by DeeThemes

1. Overview of the pack

2. Setup

3. HTML and CSS Structures

NOTE

EITHER

OR

4. Integration

Via HTML5 data-attributes

CONFIGURATION TOOL

Via Programmatic API

CONFIGURATION TOOL

5. Options

The visualization options

The animation options

Callback functions (using via programmatic API only!)

6. Programmatic API

`.addLiviconEvo( option, value )`

`.updateLiviconEvo( option, value )`

`.changeLiviconEvo( option, value )`

`.drawLiviconEvo( option, value, force )`

`.eraseLiviconEvo( option, value, force )`

`.playLiviconEvo( option, value, force )`

`.stopLiviconEvo()`

`.pauseLiviconEvo()`

`.resumeLiviconEvo()`

`.removeLiviconEvo( option, value, total )`

`.liviconEvoState( setter )`

`.liviconEvoOptions()`

7. Special thanks to

Changelog