1.10.0 • Published 11 months ago

@lordicon/element v1.10.0

Weekly downloads
-
License
MIT
Repository
-
Last release
11 months ago

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.
1.9.1

11 months ago

1.9.0

11 months ago

1.8.0

11 months ago

1.7.0

11 months ago

1.9.2

11 months ago

1.10.0

11 months ago

1.6.0

1 year ago

1.5.1

1 year ago

1.5.0

1 year ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.3.0

2 years ago

1.2.0

2 years ago

1.1.0

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago