Icons

Using package

npm i @ptsecurity/mosaic-icons

Package structure

.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── dist
│   ├── fonts
│   │   ├── mc-icons.css
│   │   ├── mc-icons.html
│   │   ├── mc-icons.scss
│   │   ├── mc-icons.ttf
│   │   └── mc-icons.woff
│   ├── info
│   │   └── mc-icons-info.json
│   ├── svg
│   │   ├── angle-down-L_16.svg
│   │   ├── angle-down-L_24.svg
│   │   ├── angle-down-M_16.svg
│   │   └── angle-down-M_24.svg
│   └── symbol
│       ├── sprite.scss
│       ├── sprite.symbol.html
│       └── svg
│           └── sprite.symbol.svg
└── package.json

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>