We have created our own lord-icon-element to write websites with fancy, interactive, animated icons. With this element, you can embed and control Lottie Files. Under the hood, the library uses an awesome lottie-web animation player.
This example presents the easiest way to use the Lordicon Custom element. It is not the most efficient method as the entire library (including lottie-web) is initialized by default.
A bundle example is available when we have installed "module bundler". Here, this role is taken over by Stackblitz; in other words, it could be a Webpack. This solution is recommended in every well-developed project.
Over here, we present a complete, minimalistic project in which we have used Lordicon Custom element in the Angular environment.
In this example, we present all possible build-in animation triggers.
In this example, we present all possible customization options supported by Lordicon Custom Element.
Note: Although we allow you to change them with this method, it is recommended to use only already exported files with given parameters (colors, scale, etc.).
This case study presents a class built into the inherit-color component that allows the element to inherit a color. It is a recommended solution if we want to present an animated icon in one color and change its color dynamically.
Using the target attribute to indicate which parent element should activate the trigger. Helpful functionality when building all kinds of links, buttons where we don't want the user to have to point the mouse cursor at the icon to activate it.
The goal of the target attribute is to indicate which trigger should activate the parent element. This functionality is helpful with building all kinds of links, buttons or blocks where we don't want the user to hover over the icon itself to activate its animation.
Preload example, which given animated icons, has been preloaded manually. This critical feature lets you load icons from bigger packages, significantly reducing the number of queries to the server, making the page load faster.
This example presents the use of the Lordicon custom element as a content container.
This example presents embedding and aligning icons inside columns. In this case, we have used a loop trigger with delay.
This example presents simple blocks, which after hovering highlights, and the icons start to animate (we are using the "Target" attribute). In addition, the icon's color inherits from the parent element instead of its own color palette, changing its hue from gray to white (we are using the "inherit-color" class built into the custom element).
If none of the provided triggers meet what we need to implement, we allow building custom animation triggers. The process is simplified as you inherit from the BasicTrigger class. This example presents how to build an animation trigger, which plays animation once only when it appears in the browser window.
Another custom example presents a trigger that plays the animation from the first to the last frame after click. Then, after the next click, it reverses the animation from the last to the first frame. This trigger is ideal for animated hamburger menus or toggles.
Another custom example presents a trigger that plays the animation while scrolling the website. This example also shows how to refer to the Lottie-web API to get additional information about animation.
Usage for icons states.