Iconography

The complete iconography library of Mural's design system.

Table of contents

1. Installation
2. Usage
3. Themes

Installation

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

Usage

After you have installed the package into your project, you can import the icons you need into your file. See MrlSvg component in @muraldevkit/ui-toolkit for actual usage details.

You may also use the mrl-svg component in @muraldevkit/ds-component-svg for the usage, but it is not recommended to continue with the web components at this point.

Available SVGs file

A file will be available at @muraldevkit/ds-icons/dist/availableSvgs/index.js. It can be used to check if an icon exists by a given name. A type definition is included at @muraldevkit/ds-icons/dist/availableSvgs/index.d.ts.

Themes

The icons package supports multiple themes. The index file will include icons from every theme. You can then specify the theme to render via the mrl-svg component prop. This is helpful when rendering an icon that has an associated feature flag where you'll need to dynamically toggle between the the theme within the product.

import { [YOUR_ICON_NAME] } from '@muraldevkit/ds-icons';

However, if you want to use only a single theme, you can import the theme file directly rather than using the index:

import { [YOUR_ICON_NAME] } from '@muraldevkit/ds-icons/dist/[YOUR_THEME_NAME]';

A real world example of how this might look is:

import { arrowBack } from '@muraldevkit/ds-icons/dist/classic';