Pictogram

The complete pictogram library of Mural's design system.

Table of contents

1. Installation
2. Usage
3. Themes
4. Special use cases: color Management

Installation

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

Usage

After you have installed the package into your project, you can import the pictograms you need into your file and use the @muraldevkit/ds-component-svg package to render the SVG HTML.

Available SVGs file

A file will be available at @muraldevkit/ds-pictograms/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-pictograms/dist/availableSvgs/index.d.ts.

Themes

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

import { [YOUR_PICTOGRAM_NAME] } from '@muraldevkit/ds-pictograms';

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

import { [YOUR_PICTOGRAM_NAME] } from '@muraldevkit/ds-pictograms/dist/[YOUR_THEME_NAME]';

A real world example of how this might look is:

import { voteAnonymous } from '@muraldevkit/ds-pictograms/dist/classic';

Special use cases: Color management

The color management pictograms, color-* and draw-*, have special nuances to ensure contrast while the color dynamically changes with user interactions. See the "Assets > Pictograms > Colors" demo on the design system Storybook site for an example. Note: these nuances will be better supported in a color swatch component in the future.

Considerations made:

• To make it easy to change the color to the custom user selected color, these icons use currentColor for the fill of the "color" portion of the SVG.
• Based on the background color of container the icon lives within, all of the icons use the class mrl-picto-color-offset to change the surrounding area. The default supports light colors on a light background. It will need to be overwritten for darker colors or when the light color is within a darker color container, such as the selected state of a toggle button.

View the "Docs > Show code" feature of the Storybook demo to see the CSS used to make the previous considerations. The specific code is within the css variable at the beginning of the code snippet.