@koobiq/icons 12.0.0 → 12.1.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## 12.1.0 (2026-06-24)
+
+### 🚀 Features
+
+- add floating-window icons (16, 24) (#DS-5187) ([#123](https://github.com/koobiq/icons/pull/123))
+- add retry tags for arrow-rotate-right 16 & 24 (#DS-4878) ([#130](https://github.com/koobiq/icons/pull/130))
+- add nginx_16 and nginx_24 icons (#DS-5218) ([#131](https://github.com/koobiq/icons/pull/131))
+
+### 🩹 Fixes
+
+- split duotone icon zones by layer name instead of color ([#125](https://github.com/koobiq/icons/pull/125))
+
+### ❤️ Thank You
+
+- Roman Turov @rmnturov
+
+## 12.0.1 (2026-06-18)
+
+### 🩹 Fixes
+
+- added @layer (#DS-5207) ([#127](https://github.com/koobiq/icons/pull/127))
+
+### ❤️ Thank You
+
+- lskramarov @lskramarov
+
 # 12.0.0 (2026-06-05)
 
 ### 🚀 Features

package/README.md

@@ -60,36 +60,53 @@ Use semver for version naming. So increment major (first) version number if any
 
 ## Overview
 
-This guide explains how to structure SVGs for dynamic styling via CSS, allowing different parts to be colored separately using `fill` and `color`.
+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
 
-- **Primary Zone**: No `fill` attribute.
-- **Secondary Zone(s)**: `fill="currentColor"`.
+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:
 
 ```css
 svg {
     fill: #8f99aa; /* Primary zone */
-    color: #00ff00; /* Secondary zone(s) */
+    --icon-accent-color: #00ff00; /* Secondary zone(s) */
 }
 ```
 
-For details, see [CSS-Tricks](https://css-tricks.com/lodge/svg/21-get-two-colors-use/).
-
 ## Figma Conventions
 
-To facilitate automated processing during the build phase, we follow these conventions in Figma:
+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`.
 
-- **Primary Zone**: `#21222C` (black).
-- **Secondary Zone(s)**: `#E21D03` (red).
+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.
 
-These colors serve as a contract between the Figma design file and the build system.
-The build process recognizes these colors and applies the appropriate transformations to ensure the correct fill behavior in the final SVG output.
+> **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
 
-- Remove `fill` from the primary zone.
-- Set secondary zones to `fill="currentColor"`.
-- Use CSS for styling.
+The zone splitting happens during `figma:sync` via the `split-zones` SVGO plugin in
+[`.figmaexportrc.mjs`](../../.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.

package/fonts/{kbq-icons-12.0.0.css → kbq-icons-12.1.0.css}

@@ -1,15 +1,17 @@
 
 @font-face {
-   font-family: "Koobiq Icons 12.0.0";
+   font-family: "Koobiq Icons 12.1.0";
    font-weight: normal;
    font-style: normal;
-   src: url("./kbq-icons-12.0.0.ttf?5710446bcbeddde4dbd4d2650b4a466c") format("truetype"),
-url("./kbq-icons-12.0.0.woff?5710446bcbeddde4dbd4d2650b4a466c") format("woff");
+   src: url("./kbq-icons-12.1.0.ttf?bf874e4863d6338a852f3f4f5d2ce86e") format("truetype"),
+url("./kbq-icons-12.1.0.woff?bf874e4863d6338a852f3f4f5d2ce86e") format("woff");
 }
   
+@layer kbq-icons {
+
 
 .kbq {
-font-family: "Koobiq Icons 12.0.0";
+font-family: "Koobiq Icons 12.1.0";
 display:inline-block;
 vertical-align:middle;
 line-height:1;
@@ -7018,3 +7020,29 @@ transform:rotate(0.001deg);
     .kbq-list-circle-xmark_24:before {
         content: "\f9c8";
     }
+    .kbq-floating-window_16 {
+        font-size: 16px;
+    }
+    .kbq-floating-window_16:before {
+        content: "\f9c9";
+    }
+    .kbq-floating-window_24 {
+        font-size: 24px;
+    }
+    .kbq-floating-window_24:before {
+        content: "\f9ca";
+    }
+    .kbq-nginx_16 {
+        font-size: 16px;
+    }
+    .kbq-nginx_16:before {
+        content: "\f9cb";
+    }
+    .kbq-nginx_24 {
+        font-size: 24px;
+    }
+    .kbq-nginx_24:before {
+        content: "\f9cc";
+    }
+
+}

package/fonts/{kbq-icons-12.0.0.html → kbq-icons-12.1.0.html}

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>kbq-icons-12.0.0</title>
+    <title>kbq-icons-12.1.0</title>
     <style>
         html {
             box-sizing: border-box;
@@ -89,10 +89,10 @@
         }
     </style>
 
-    <link rel="stylesheet" type="text/css" href="kbq-icons-12.0.0.css" />
+    <link rel="stylesheet" type="text/css" href="kbq-icons-12.1.0.css" />
 </head>
 <body>
-    <h1>kbq-icons-12.0.0</h1>
+    <h1>kbq-icons-12.1.0</h1>
 
     <div id="icons">
             <div class="icon" data-name="xmark_32" title="xmark_32">
@@ -1967,6 +1967,18 @@
                     <span class='label'>node-tree_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="nginx_24" title="nginx_24">
+                <span class="inner">
+                    <i class="kbq kbq-nginx_24" aria-hidden="true"></i>
+                    <span class='label'>nginx_24</span>
+                </span>
+            </div>
+            <div class="icon" data-name="nginx_16" title="nginx_16">
+                <span class="inner">
+                    <i class="kbq kbq-nginx_16" aria-hidden="true"></i>
+                    <span class='label'>nginx_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="network-device_24" title="network-device_24">
                 <span class="inner">
                     <i class="kbq kbq-network-device_24" aria-hidden="true"></i>
@@ -3203,6 +3215,18 @@
                     <span class='label'>floppy-disk_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="floating-window_24" title="floating-window_24">
+                <span class="inner">
+                    <i class="kbq kbq-floating-window_24" aria-hidden="true"></i>
+                    <span class='label'>floating-window_24</span>
+                </span>
+            </div>
+            <div class="icon" data-name="floating-window_16" title="floating-window_16">
+                <span class="inner">
+                    <i class="kbq kbq-floating-window_16" aria-hidden="true"></i>
+                    <span class='label'>floating-window_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="fire-flame_24" title="fire-flame_24">
                 <span class="inner">
                     <i class="kbq kbq-fire-flame_24" aria-hidden="true"></i>

package/fonts/{kbq-icons-12.0.0.scss → kbq-icons-12.1.0.scss}

@@ -1,15 +1,17 @@
 
 @font-face {
-   font-family: "Koobiq Icons 12.0.0";
+   font-family: "Koobiq Icons 12.1.0";
    font-weight: normal;
    font-style: normal;
-   src: url("./kbq-icons-12.0.0.ttf?5710446bcbeddde4dbd4d2650b4a466c") format("truetype"),
-url("./kbq-icons-12.0.0.woff?5710446bcbeddde4dbd4d2650b4a466c") format("woff");
+   src: url("./kbq-icons-12.1.0.ttf?bf874e4863d6338a852f3f4f5d2ce86e") format("truetype"),
+url("./kbq-icons-12.1.0.woff?bf874e4863d6338a852f3f4f5d2ce86e") format("woff");
 }
   
+@layer kbq-icons {
+
 
 .kbq {
-font-family: "Koobiq Icons 12.0.0";
+font-family: "Koobiq Icons 12.1.0";
 display:inline-block;
 vertical-align:middle;
 line-height:1;
@@ -7018,3 +7020,29 @@ transform:rotate(0.001deg);
             content: "\f9c8";
         }
     }
+    .kbq-floating-window_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f9c9";
+        }
+    }
+    .kbq-floating-window_24 {
+        font-size: 24px;
+        &:before {
+            content: "\f9ca";
+        }
+    }
+    .kbq-nginx_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f9cb";
+        }
+    }
+    .kbq-nginx_24 {
+        font-size: 24px;
+        &:before {
+            content: "\f9cc";
+        }
+    }
+
+}

package/fonts/kbq-icons.css

@@ -3,10 +3,12 @@
    font-family: "Koobiq Icons";
    font-weight: normal;
    font-style: normal;
-   src: url("./kbq-icons.ttf?922382ffa066f48801ea776f0a296327") format("truetype"),
-url("./kbq-icons.woff?922382ffa066f48801ea776f0a296327") format("woff");
+   src: url("./kbq-icons.ttf?5e5b9a2951f79bc105afb8432a4d45f2") format("truetype"),
+url("./kbq-icons.woff?5e5b9a2951f79bc105afb8432a4d45f2") format("woff");
 }
   
+@layer kbq-icons {
+
 
 .kbq {
 font-family: "Koobiq Icons";
@@ -7018,3 +7020,29 @@ transform:rotate(0.001deg);
     .kbq-list-circle-xmark_24:before {
         content: "\f9c8";
     }
+    .kbq-floating-window_16 {
+        font-size: 16px;
+    }
+    .kbq-floating-window_16:before {
+        content: "\f9c9";
+    }
+    .kbq-floating-window_24 {
+        font-size: 24px;
+    }
+    .kbq-floating-window_24:before {
+        content: "\f9ca";
+    }
+    .kbq-nginx_16 {
+        font-size: 16px;
+    }
+    .kbq-nginx_16:before {
+        content: "\f9cb";
+    }
+    .kbq-nginx_24 {
+        font-size: 24px;
+    }
+    .kbq-nginx_24:before {
+        content: "\f9cc";
+    }
+
+}

package/fonts/kbq-icons.html

@@ -1967,6 +1967,18 @@
                     <span class='label'>node-tree_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="nginx_24" title="nginx_24">
+                <span class="inner">
+                    <i class="kbq kbq-nginx_24" aria-hidden="true"></i>
+                    <span class='label'>nginx_24</span>
+                </span>
+            </div>
+            <div class="icon" data-name="nginx_16" title="nginx_16">
+                <span class="inner">
+                    <i class="kbq kbq-nginx_16" aria-hidden="true"></i>
+                    <span class='label'>nginx_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="network-device_24" title="network-device_24">
                 <span class="inner">
                     <i class="kbq kbq-network-device_24" aria-hidden="true"></i>
@@ -3203,6 +3215,18 @@
                     <span class='label'>floppy-disk_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="floating-window_24" title="floating-window_24">
+                <span class="inner">
+                    <i class="kbq kbq-floating-window_24" aria-hidden="true"></i>
+                    <span class='label'>floating-window_24</span>
+                </span>
+            </div>
+            <div class="icon" data-name="floating-window_16" title="floating-window_16">
+                <span class="inner">
+                    <i class="kbq kbq-floating-window_16" aria-hidden="true"></i>
+                    <span class='label'>floating-window_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="fire-flame_24" title="fire-flame_24">
                 <span class="inner">
                     <i class="kbq kbq-fire-flame_24" aria-hidden="true"></i>

package/fonts/kbq-icons.scss

@@ -3,10 +3,12 @@
    font-family: "Koobiq Icons";
    font-weight: normal;
    font-style: normal;
-   src: url("./kbq-icons.ttf?922382ffa066f48801ea776f0a296327") format("truetype"),
-url("./kbq-icons.woff?922382ffa066f48801ea776f0a296327") format("woff");
+   src: url("./kbq-icons.ttf?5e5b9a2951f79bc105afb8432a4d45f2") format("truetype"),
+url("./kbq-icons.woff?5e5b9a2951f79bc105afb8432a4d45f2") format("woff");
 }
   
+@layer kbq-icons {
+
 
 .kbq {
 font-family: "Koobiq Icons";
@@ -7018,3 +7020,29 @@ transform:rotate(0.001deg);
             content: "\f9c8";
         }
     }
+    .kbq-floating-window_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f9c9";
+        }
+    }
+    .kbq-floating-window_24 {
+        font-size: 24px;
+        &:before {
+            content: "\f9ca";
+        }
+    }
+    .kbq-nginx_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f9cb";
+        }
+    }
+    .kbq-nginx_24 {
+        font-size: 24px;
+        &:before {
+            content: "\f9cc";
+        }
+    }
+
+}