@lordicon/element
TypeScript icon, indicating that this package has built-in type declarations

1.10.1 • Public • Published

Element

This package offers developers a convenient method for embedding, controlling, and customizing animated icons from Lordicon within web projects.

It offers the following features:

  • Easily load and render animated icons using the HTML tag lord-icon.
  • On-the-fly customization of stroke width, colors, and other supported properties.
  • Control the animation details by accessing the player implementation and its internal API.
  • Animation triggers that allow you to select built-in interactions such as: in, click, hover, morph, loop, loop-on-hover, boomerang, and sequence.

Installation

$ npm install @lordicon/element lottie-web

Usage

This package should be used in pair with lottie-web. We recommend using this package with a module bundler such as Webpack or Rollup.

Example script module:

import lottie from "lottie-web";
import { defineElement } from "@lordicon/element";

// define "lord-icon" custom element with default properties
defineElement(lottie.loadAnimation);

Example markup:

<lord-icon trigger="hover" src="/my-icon.json"></lord-icon>

More examples

For more code samples demonstrating various possibilities, please refer to the 'demo' folder.

Useful links

  • Lordicon - Lordicon is a powerful library of thousands of carefully crafted animated icons.
  • Lottie - Render After Effects animations natively on Web, Android and iOS, and React Native.

Package Sidebar

Install

npm i @lordicon/element

Weekly Downloads

3,400

Version

1.10.1

License

MIT

Unpacked Size

435 kB

Total Files

20

Last publish

Collaborators

  • baszczewski
  • willusz