@koobiq/icons 9.3.0 → 9.4.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# 9.4.0 "Late March" (2025-03-26)
+
+### Icons
+
+ * feature  add icons and codepoints ([#DS-3560](https://github.com/koobiq/icons/issues/issue/DS-3560)) ([#15](https://github.com/koobiq/icons/issues/15)) 3094e46
+
+## 9.3.1 (2025-03-20)
+
+### Icons
+
+ * bug fix  returned two-tone icons ([#DS-3446](https://github.com/koobiq/icons/issues/issue/DS-3446)) ([#14](https://github.com/koobiq/icons/issues/14)) 4447513
+
 # 9.3.0 "Icons Enhancement" (2025-03-07)
 
 ### Icons

package/README.md

@@ -55,3 +55,41 @@ Use semver for version naming. So increment major (first) version number if any
 -   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 to structure SVGs for dynamic styling via CSS, allowing different parts to be colored separately using `fill` and `color`.
+
+## How It Works
+
+-   **Primary Zone**: No `fill` attribute.
+-   **Secondary Zone(s)**: `fill="currentColor"`.
+
+CSS styling:
+
+```css
+svg {
+    fill: #8f99aa; /* Primary zone */
+    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:
+
+-   **Primary Zone**: `#21222C` (black).
+-   **Secondary Zone(s)**: `#E21D03` (red).
+
+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.
+
+## Implementation
+
+-   Remove `fill` from the primary zone.
+-   Set secondary zones to `fill="currentColor"`.
+-   Use CSS for styling.

package/fonts/kbq-icons.css

@@ -2,8 +2,8 @@
 font-family: "Koobiq Icons";
 font-weight:normal;
 font-style:normal;
-src: url("./kbq-icons.ttf?e7e87a5cac95f63a7ccea04920f48f19") format("truetype"),
-url("./kbq-icons.woff?e7e87a5cac95f63a7ccea04920f48f19") format("woff");
+src: url("./kbq-icons.ttf?df07f3b9e8047df60abc6c20a8e74de3") format("truetype"),
+url("./kbq-icons.woff?df07f3b9e8047df60abc6c20a8e74de3") format("woff");
 }
 
 .kbq {
@@ -3830,3 +3830,27 @@ transform:rotate(0.001deg);
     .kbq-ubuntu_16:before {
         content: "\f80c";
     }
+    .kbq-cloud-badge-globe_24 {
+        font-size: 24px;
+    }
+    .kbq-cloud-badge-globe_24:before {
+        content: "\f80d";
+    }
+    .kbq-desktop-o_16 {
+        font-size: 16px;
+    }
+    .kbq-desktop-o_16:before {
+        content: "\f80e";
+    }
+    .kbq-desktop-plus-o_16 {
+        font-size: 16px;
+    }
+    .kbq-desktop-plus-o_16:before {
+        content: "\f80f";
+    }
+    .kbq-desktop-multiple-o_16 {
+        font-size: 16px;
+    }
+    .kbq-desktop-multiple-o_16:before {
+        content: "\f810";
+    }

package/fonts/kbq-icons.html

@@ -2237,6 +2237,18 @@
                     <span class='label'>desktop-plus_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="desktop-plus-o_16" title="desktop-plus-o_16">
+                <span class="inner">
+                    <i class="kbq kbq-desktop-plus-o_16" aria-hidden="true"></i>
+                    <span class='label'>desktop-plus-o_16</span>
+                </span>
+            </div>
+            <div class="icon" data-name="desktop-o_16" title="desktop-o_16">
+                <span class="inner">
+                    <i class="kbq kbq-desktop-o_16" aria-hidden="true"></i>
+                    <span class='label'>desktop-o_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="desktop-multiple_24" title="desktop-multiple_24">
                 <span class="inner">
                     <i class="kbq kbq-desktop-multiple_24" aria-hidden="true"></i>
@@ -2249,6 +2261,12 @@
                     <span class='label'>desktop-multiple_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="desktop-multiple-o_16" title="desktop-multiple-o_16">
+                <span class="inner">
+                    <i class="kbq kbq-desktop-multiple-o_16" aria-hidden="true"></i>
+                    <span class='label'>desktop-multiple-o_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="dataflow_16" title="dataflow_16">
                 <span class="inner">
                     <i class="kbq kbq-dataflow_16" aria-hidden="true"></i>
@@ -2399,6 +2417,12 @@
                     <span class='label'>cloud-badge-key-o_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="cloud-badge-globe_24" title="cloud-badge-globe_24">
+                <span class="inner">
+                    <i class="kbq kbq-cloud-badge-globe_24" aria-hidden="true"></i>
+                    <span class='label'>cloud-badge-globe_24</span>
+                </span>
+            </div>
             <div class="icon" data-name="cloud-badge-globe_16" title="cloud-badge-globe_16">
                 <span class="inner">
                     <i class="kbq kbq-cloud-badge-globe_16" aria-hidden="true"></i>

package/fonts/kbq-icons.scss

@@ -2,8 +2,8 @@
 font-family: "Koobiq Icons";
 font-weight:normal;
 font-style:normal;
-src: url("./kbq-icons.ttf?e7e87a5cac95f63a7ccea04920f48f19") format("truetype"),
-url("./kbq-icons.woff?e7e87a5cac95f63a7ccea04920f48f19") format("woff");
+src: url("./kbq-icons.ttf?df07f3b9e8047df60abc6c20a8e74de3") format("truetype"),
+url("./kbq-icons.woff?df07f3b9e8047df60abc6c20a8e74de3") format("woff");
 }
 
 .kbq {
@@ -3830,3 +3830,27 @@ transform:rotate(0.001deg);
             content: "\f80c";
         }
     }
+    .kbq-cloud-badge-globe_24 {
+        font-size: 24px;
+        &:before {
+            content: "\f80d";
+        }
+    }
+    .kbq-desktop-o_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f80e";
+        }
+    }
+    .kbq-desktop-plus-o_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f80f";
+        }
+    }
+    .kbq-desktop-multiple-o_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f810";
+        }
+    }