@muraldevkit/ds-icons-animated v1.4.0

Animated icons

JSON files used by Lottie to generate animated SVGs for Mural's design system.

Table of contents

1. Installation
2. Usage

Installation

Review the design system's global usage guidelines to learn how to install our packages. This package's name is @muraldevkit/ds-icons-animated.

Usage

After you have installed the package into your project, you can import the JSON files you need into your file. This is a hybrid package which outputs both CommonJs(https://requirejs. org/docs/commonjs.html) and ECMAScript modules.

// ESM
import { llamaBlack } from '@muraldevkit/ds-icons-animated';

// CommonJS
const llamaBlack = require('@muraldevkit/ds-icons-animated');

If you need to import a file directly from the dist folder of the package, be sure to use the path of the appropriate subfolder for your module, i.e. dist/cjs for CommonJs and dist/esm for ESM.

Once you have imported the JSON file you wish to render, you can pass it to the animated SVG component (mrl-svg-animate in @muraldevkit/ds-component-svg) as a prop:

const icon = <mrl-svg-animate svg-data={ JSON.stringify(llamaBlack) } />;