Icons

Using package

npm i @mosaic-design/icons

Building Locally

Install dependencies

Install dependencies by running:

npm install

Sync with Figma

npm run figma:sync

Build all packages

npm run build:all

Output will be exported to a dist/icons folder.

Add new icons

Step 1.

Export your icons (svg) from Figma:

npm run figma:sync

Step 2.

Add an entry into mapping.json with a new codepoint keys.

Commit and push all changes to git.

Step 3.

Run stage commit script to create a new release tag.

npm run stage:commit

Using CSS Classes

Create a DOM element/container that contains mc-icon and the icon name like:

<div class='mc-icon mc-angle-down-L_16'></div>

Using SVG Sprites

When needing to use the sprite.symbol.svg sprite file, you can reference icons using the following method:

<svg>
    <use xlink:href="sprite.symbol.svg#add" />
</svg>