@koobiq/icons 9.2.0 → 9.3.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 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
+
+ * feature  added auto update fontVersion ([#DS-2164](https://github.com/koobiq/icons/issues/issue/DS-2164)) ([#7](https://github.com/koobiq/icons/issues/7)) 97dce54
+ * feature  new icons ([#DS-2916](https://github.com/koobiq/icons/issues/issue/DS-2916)) ([#11](https://github.com/koobiq/icons/issues/11)) ec8bceb
+ * feature  script for check mapping and svg file list ([#12](https://github.com/koobiq/icons/issues/12)) 3c12653
+
 # 9.2.0 (2024-10-28)
 
  **Added**

package/README.md

@@ -9,6 +9,7 @@ npm i @koobiq/icons
 # Publish new version
 
 ## Step 1. Prepare and environment
+
 Install dependencies by running:
 
 ```
@@ -27,6 +28,7 @@ yarn install
 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
 ```
@@ -34,20 +36,60 @@ 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
+
+-   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)
+-   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?f75aede8c6cd491b3d01a48d8b1cb94c") format("truetype"),
-url("./kbq-icons.woff?f75aede8c6cd491b3d01a48d8b1cb94c") format("woff");
+src: url("./kbq-icons.ttf?0b5b85a4afa1b6cbc970e210fce87562") format("truetype"),
+url("./kbq-icons.woff?0b5b85a4afa1b6cbc970e210fce87562") format("woff");
 }
 
 .kbq {
@@ -3740,3 +3740,93 @@ transform:rotate(0.001deg);
     .kbq-north-east_16:before {
         content: "\f7fd";
     }
+    .kbq-arrow-down-xs_16 {
+        font-size: 16px;
+    }
+    .kbq-arrow-down-xs_16:before {
+        content: "\f7fe";
+    }
+    .kbq-arrow-rotate-right_24 {
+        font-size: 24px;
+    }
+    .kbq-arrow-rotate-right_24:before {
+        content: "\f7ff";
+    }
+    .kbq-arrow-up-xs_16 {
+        font-size: 16px;
+    }
+    .kbq-arrow-up-xs_16:before {
+        content: "\f800";
+    }
+    .kbq-arrows-rotate_16 {
+        font-size: 16px;
+    }
+    .kbq-arrows-rotate_16:before {
+        content: "\f801";
+    }
+    .kbq-arrows-rotate_24 {
+        font-size: 24px;
+    }
+    .kbq-arrows-rotate_24:before {
+        content: "\f802";
+    }
+    .kbq-arrows-rotate-slash_16 {
+        font-size: 16px;
+    }
+    .kbq-arrows-rotate-slash_16:before {
+        content: "\f803";
+    }
+    .kbq-arrows-rotate-slash_24 {
+        font-size: 24px;
+    }
+    .kbq-arrows-rotate-slash_24:before {
+        content: "\f804";
+    }
+    .kbq-astra-linux_16 {
+        font-size: 16px;
+    }
+    .kbq-astra-linux_16:before {
+        content: "\f805";
+    }
+    .kbq-chart-gauge-o_24 {
+        font-size: 24px;
+    }
+    .kbq-chart-gauge-o_24:before {
+        content: "\f806";
+    }
+    .kbq-code_24 {
+        font-size: 24px;
+    }
+    .kbq-code_24:before {
+        content: "\f807";
+    }
+    .kbq-opensuse_16 {
+        font-size: 16px;
+    }
+    .kbq-opensuse_16:before {
+        content: "\f808";
+    }
+    .kbq-pencil-on-line_16 {
+        font-size: 16px;
+    }
+    .kbq-pencil-on-line_16:before {
+        content: "\f809";
+    }
+    .kbq-puzzle-piece_16 {
+        font-size: 16px;
+    }
+    .kbq-puzzle-piece_16:before {
+        content: "\f80a";
+    }
+    .kbq-thumbs-down_16 {
+        font-size: 16px;
+    }
+    .kbq-thumbs-down_16:before {
+        content: "\f80b";
+    }
+    .kbq-ubuntu_16 {
+        font-size: 16px;
+    }
+    .kbq-ubuntu_16:before {
+        content: "\f80c";
+    }

package/fonts/kbq-icons.html

@@ -293,6 +293,12 @@
                     <span class='label'>undo_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="ubuntu_16" title="ubuntu_16">
+                <span class="inner">
+                    <i class="kbq kbq-ubuntu_16" aria-hidden="true"></i>
+                    <span class='label'>ubuntu_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="triangle-o_16" title="triangle-o_16">
                 <span class="inner">
                     <i class="kbq kbq-triangle-o_16" aria-hidden="true"></i>
@@ -347,6 +353,12 @@
                     <span class='label'>thumbs-up_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="thumbs-down_16" title="thumbs-down_16">
+                <span class="inner">
+                    <i class="kbq kbq-thumbs-down_16" aria-hidden="true"></i>
+                    <span class='label'>thumbs-down_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="text_16" title="text_16">
                 <span class="inner">
                     <i class="kbq kbq-text_16" aria-hidden="true"></i>
@@ -893,6 +905,12 @@
                     <span class='label'>ql_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="puzzle-piece_16" title="puzzle-piece_16">
+                <span class="inner">
+                    <i class="kbq kbq-puzzle-piece_16" aria-hidden="true"></i>
+                    <span class='label'>puzzle-piece_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="pulse_16" title="pulse_16">
                 <span class="inner">
                     <i class="kbq kbq-pulse_16" aria-hidden="true"></i>
@@ -1031,6 +1049,12 @@
                     <span class='label'>pencil_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="pencil-on-line_16" title="pencil-on-line_16">
+                <span class="inner">
+                    <i class="kbq kbq-pencil-on-line_16" aria-hidden="true"></i>
+                    <span class='label'>pencil-on-line_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="pause_64" title="pause_64">
                 <span class="inner">
                     <i class="kbq kbq-pause_64" aria-hidden="true"></i>
@@ -1091,6 +1115,12 @@
                     <span class='label'>palette_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="opensuse_16" title="opensuse_16">
+                <span class="inner">
+                    <i class="kbq kbq-opensuse_16" aria-hidden="true"></i>
+                    <span class='label'>opensuse_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="notebook-user_16" title="notebook-user_16">
                 <span class="inner">
                     <i class="kbq kbq-notebook-user_16" aria-hidden="true"></i>
@@ -2321,6 +2351,12 @@
                     <span class='label'>compass_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="code_24" title="code_24">
+                <span class="inner">
+                    <i class="kbq kbq-code_24" aria-hidden="true"></i>
+                    <span class='label'>code_24</span>
+                </span>
+            </div>
             <div class="icon" data-name="code_16" title="code_16">
                 <span class="inner">
                     <i class="kbq kbq-code_16" aria-hidden="true"></i>
@@ -2885,6 +2921,12 @@
                     <span class='label'>chart-heatmap_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="chart-gauge-o_24" title="chart-gauge-o_24">
+                <span class="inner">
+                    <i class="kbq kbq-chart-gauge-o_24" aria-hidden="true"></i>
+                    <span class='label'>chart-gauge-o_24</span>
+                </span>
+            </div>
             <div class="icon" data-name="chart-gauge-o_16" title="chart-gauge-o_16">
                 <span class="inner">
                     <i class="kbq kbq-chart-gauge-o_16" aria-hidden="true"></i>
@@ -3323,6 +3365,12 @@
                     <span class='label'>backward-step_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="astra-linux_16" title="astra-linux_16">
+                <span class="inner">
+                    <i class="kbq kbq-astra-linux_16" aria-hidden="true"></i>
+                    <span class='label'>astra-linux_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="asterisk_16" title="asterisk_16">
                 <span class="inner">
                     <i class="kbq kbq-asterisk_16" aria-hidden="true"></i>
@@ -3347,6 +3395,30 @@
                     <span class='label'>arrows-rotate_48</span>
                 </span>
             </div>
+            <div class="icon" data-name="arrows-rotate_24" title="arrows-rotate_24">
+                <span class="inner">
+                    <i class="kbq kbq-arrows-rotate_24" aria-hidden="true"></i>
+                    <span class='label'>arrows-rotate_24</span>
+                </span>
+            </div>
+            <div class="icon" data-name="arrows-rotate_16" title="arrows-rotate_16">
+                <span class="inner">
+                    <i class="kbq kbq-arrows-rotate_16" aria-hidden="true"></i>
+                    <span class='label'>arrows-rotate_16</span>
+                </span>
+            </div>
+            <div class="icon" data-name="arrows-rotate-slash_24" title="arrows-rotate-slash_24">
+                <span class="inner">
+                    <i class="kbq kbq-arrows-rotate-slash_24" aria-hidden="true"></i>
+                    <span class='label'>arrows-rotate-slash_24</span>
+                </span>
+            </div>
+            <div class="icon" data-name="arrows-rotate-slash_16" title="arrows-rotate-slash_16">
+                <span class="inner">
+                    <i class="kbq kbq-arrows-rotate-slash_16" aria-hidden="true"></i>
+                    <span class='label'>arrows-rotate-slash_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="arrows-rotate-reverse_24" title="arrows-rotate-reverse_24">
                 <span class="inner">
                     <i class="kbq kbq-arrows-rotate-reverse_24" aria-hidden="true"></i>
@@ -3437,6 +3509,12 @@
                     <span class='label'>arrow-up_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="arrow-up-xs_16" title="arrow-up-xs_16">
+                <span class="inner">
+                    <i class="kbq kbq-arrow-up-xs_16" aria-hidden="true"></i>
+                    <span class='label'>arrow-up-xs_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="arrow-up-s_16" title="arrow-up-s_16">
                 <span class="inner">
                     <i class="kbq kbq-arrow-up-s_16" aria-hidden="true"></i>
@@ -3509,6 +3587,12 @@
                     <span class='label'>arrow-turn-down-left_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="arrow-rotate-right_24" title="arrow-rotate-right_24">
+                <span class="inner">
+                    <i class="kbq kbq-arrow-rotate-right_24" aria-hidden="true"></i>
+                    <span class='label'>arrow-rotate-right_24</span>
+                </span>
+            </div>
             <div class="icon" data-name="arrow-rotate-right_16" title="arrow-rotate-right_16">
                 <span class="inner">
                     <i class="kbq kbq-arrow-rotate-right_16" aria-hidden="true"></i>
@@ -3659,6 +3743,12 @@
                     <span class='label'>arrow-down_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="arrow-down-xs_16" title="arrow-down-xs_16">
+                <span class="inner">
+                    <i class="kbq kbq-arrow-down-xs_16" aria-hidden="true"></i>
+                    <span class='label'>arrow-down-xs_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="arrow-down-to-line_16" title="arrow-down-to-line_16">
                 <span class="inner">
                     <i class="kbq kbq-arrow-down-to-line_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?f75aede8c6cd491b3d01a48d8b1cb94c") format("truetype"),
-url("./kbq-icons.woff?f75aede8c6cd491b3d01a48d8b1cb94c") format("woff");
+src: url("./kbq-icons.ttf?0b5b85a4afa1b6cbc970e210fce87562") format("truetype"),
+url("./kbq-icons.woff?0b5b85a4afa1b6cbc970e210fce87562") format("woff");
 }
 
 .kbq {
@@ -3740,3 +3740,93 @@ transform:rotate(0.001deg);
             content: "\f7fd";
         }
     }
+    .kbq-arrow-down-xs_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f7fe";
+        }
+    }
+    .kbq-arrow-rotate-right_24 {
+        font-size: 24px;
+        &:before {
+            content: "\f7ff";
+        }
+    }
+    .kbq-arrow-up-xs_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f800";
+        }
+    }
+    .kbq-arrows-rotate_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f801";
+        }
+    }
+    .kbq-arrows-rotate_24 {
+        font-size: 24px;
+        &:before {
+            content: "\f802";
+        }
+    }
+    .kbq-arrows-rotate-slash_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f803";
+        }
+    }
+    .kbq-arrows-rotate-slash_24 {
+        font-size: 24px;
+        &:before {
+            content: "\f804";
+        }
+    }
+    .kbq-astra-linux_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f805";
+        }
+    }
+    .kbq-chart-gauge-o_24 {
+        font-size: 24px;
+        &:before {
+            content: "\f806";
+        }
+    }
+    .kbq-code_24 {
+        font-size: 24px;
+        &:before {
+            content: "\f807";
+        }
+    }
+    .kbq-opensuse_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f808";
+        }
+    }
+    .kbq-pencil-on-line_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f809";
+        }
+    }
+    .kbq-puzzle-piece_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f80a";
+        }
+    }
+    .kbq-thumbs-down_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f80b";
+        }
+    }
+    .kbq-ubuntu_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f80c";
+        }
+    }