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');

This package is side-effect-free, so if you have tree shaking properly configured your bundler will include only the icons you actually import.

Deep imports

Alternatively, you can import a single icon directly by its file name. This lets your bundler include only the icons you use, regardless of tree-shaking configuration:

// ESM
import llamaBlack from '@muraldevkit/ds-icons-animated/llama-on-black';

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

The subpath matches the JSON file name (kebab-case), e.g. chevron-less, status-processing.

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) } />;