From v1.2 there is the ability to work with icons dynamically via three JS methods. These methods are .addLivicon(), updateLivicon() and .removeLivicon(). The first two ones can get options which are equal to data attributes data-... explained above. The last method can get only one option - 'total'.
For two methods options can be passed in two notations: full and short.
Now you even not always need class livicon to draw a desired icon.
Please keep in mind that any options passed to a method has the highest priority for a corresponding icon and will override the global defaults and any same data-... attributes.
Example of usage in full notation for ex. .addLivicon():
$('#my_cool_icon').addLivicon({
name : "comment",
size : 32,
color : "original",
hovercolor : "#000",
animate : "true",
loop : false,
iteration : 3,
duration : 700,
eventtype : "hover",
onparent : false
});
Example of usage in short notation for ex. .updateLivicon():
$('#my_cool_icon').updateLivicon({
n : "comments", //you can change the icon itself
s : 48,
c : "blue",
hc : "red",
a : "true",
l : false,
i : 3,
d : 700,
et : "click",
op : false
});
Of course you can write that in one string:
$('#my_cool_icon').addLivicon({ name : "comment", size : 32, color : "original", hovercolor : "#000", animate : "true", loop : false, iteration : 3, duration : 700, eventtype : "hover", onparent : false });
If any of the above parameters are omitted, the script will take values from data attributes and (or) from the default settings.
.removeLivicon() method can work in two ways:
Without an option
$('#my_cool_icon').removeLivicon();
it will delete SVG or VML code from a chosen element (we can say that we clear a canvas).
With option 'total' it removes from the DOM the element itself. In the next example the element #my_cool_icon will be destroyed completely after execution:
$('#my_cool_icon').removeLivicon('total');