Icons

How to use package

npm i @koobiq/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

How to rebuild package locally

Install dependencies

Install dependencies by running:

npm install

Sync with Figma

Create a file with name .env and add there your Figma access token.

npm run figma:sync

Build all packages

npm run build:all

Output will be exported to a dist/icons folder.

Publish new version

Step 1. Prepare and environment

Install dependencies by running:

npm install

Step 2. Draw an icon

1. Draw your icon in Mosaic Icons figma file.
2. Make icons contains the only single outlined and flattened path with name shape (second-color path with name shape-2).
3. Using a Fill Rule Editor plugin, set shapes' fill rule to Non-zero fill. Make sure icon is rendered correctly.
4. Run flatten for shapes one more time (there is a bug in Figma).

Step 3. Export icons from figma

Create a file with name .env and add there your Figma access token.

To export your icons (SVG) from Figma run the command:

npm run figma:sync

Step 4.

Change mapping.json:

• Add an entry into mapping.json with a new codepoint keys.
• Edit the name of an icon in the mapping.json in case of icon rename

Commit SVG files mapping.json and and push all changes to git.

Step 5.

Run stage commit script to create a new release tag.

npm run stage:commit

Use semver for version naming. So increment major (first) version number if any of these changes were made:

• Any icon name was changed (breaking changes for front-end developers)
• Any icon codepoint was changed (breaking changes for tech writers)
• Significant changes in icon metaphor (breaking changes for all)

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>