Koobiq Icons

How to use package

npm i @koobiq/icons

Publish new version

Step 1. Prepare and environment

Install dependencies by running:

yarn install

Step 2. Draw an icon

1. Draw your icon in Koobiq 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:

yarn 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 push all changes to git.

Step 5.

Run stage commit script to create a new release tag.

yarn 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)

SVG Color Zones Guide

Overview

This guide explains how duotone icons are structured for dynamic styling via CSS, allowing different parts (zones) to be colored separately using fill and color.

How It Works

In the final SVG output:

• Primary Zone: No fill attribute — inherits the CSS fill property.
• Secondary Zone(s): fill="var(--icon-accent-color, currentColor)" — driven by the --icon-accent-color CSS custom property, falling back to currentColor.

CSS styling:

svg {
    fill: #8f99aa; /* Primary zone */
    --icon-accent-color: #00ff00; /* Secondary zone(s) */
}

Figma Conventions

Zones are detected by Figma layer name, not by color. This is the contract between the Figma design file and the build system:

• Primary Zone: layer named shape.
• Secondary Zone(s): layer named shape-2.

Figma is queried with svg_include_id: true, so every layer is exported with an id matching its layer name. The build process keys off that id to decide which zone a node belongs to.

Note: previously zones were matched by hardcoded hex colors (#21222C / #E21D03). That binding was dropped because it silently broke every duotone icon whenever the Figma palette changed — keying off the layer name keeps the duotone mechanism working regardless of the colors used in Figma.

Because color is no longer part of the contract, you don't need specific zone colors in Figma. Any baked color, inline style, and fill-opacity are stripped on export — transparency and color are controlled via CSS in the design system, not baked into the SVG.

Implementation

The zone splitting happens during figma:sync via the split-zones SVGO plugin in .figmaexportrc.mjs:

• Remove fill from the root <svg> and from primary-zone nodes.
• Set secondary-zone (shape-2) nodes to fill="var(--icon-accent-color, currentColor)".
• Strip baked style, color, class, and fill-opacity so color/opacity stay CSS-driven.