@koobiq/icons 9.4.1 → 10.1.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# 10.1.0 (2025-06-02)
+
+### Icons
+
+ * feature  sync-may25-icons ([#DS-3797](https://github.com/koobiq/icons/issues/issue/DS-3797)) ([#33](https://github.com/koobiq/icons/issues/33)) db19f19
+
+# 10.0.0 (2025-05-12)
+
+### Icons
+
+ * bug fix  rename dark images ([#DS-3413](https://github.com/koobiq/icons/issues/issue/DS-3413)) ([#10](https://github.com/koobiq/icons/issues/10)) 0ae39c8
+
+#### BREAKING CHANGES
+*    Removed the extra `dark-` in filenames within `images/dark` directory to make paths cleaner. Update any references to these images in your code.
+
 ## 9.4.1 (2025-04-25)
 
 ### Icons

package/README.md

@@ -37,8 +37,8 @@ yarn run figma:sync
 
 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.
 
@@ -52,9 +52,9 @@ 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
 
@@ -64,8 +64,8 @@ This guide explains how to structure SVGs for dynamic styling via CSS, allowing
 
 ## How It Works
 
--   **Primary Zone**: No `fill` attribute.
--   **Secondary Zone(s)**: `fill="currentColor"`.
+- **Primary Zone**: No `fill` attribute.
+- **Secondary Zone(s)**: `fill="currentColor"`.
 
 CSS styling:
 
@@ -82,14 +82,14 @@ For details, see [CSS-Tricks](https://css-tricks.com/lodge/svg/21-get-two-colors
 
 To facilitate automated processing during the build phase, we follow these conventions in Figma:
 
--   **Primary Zone**: `#21222C` (black).
--   **Secondary Zone(s)**: `#E21D03` (red).
+- **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.
+- 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?df07f3b9e8047df60abc6c20a8e74de3") format("truetype"),
-url("./kbq-icons.woff?df07f3b9e8047df60abc6c20a8e74de3") format("woff");
+src: url("./kbq-icons.ttf?a0f4d4404688991e73ce373434df6a5e") format("truetype"),
+url("./kbq-icons.woff?a0f4d4404688991e73ce373434df6a5e") format("woff");
 }
 
 .kbq {
@@ -3854,3 +3854,87 @@ transform:rotate(0.001deg);
     .kbq-desktop-multiple-o_16:before {
         content: "\f810";
     }
+    .kbq-behance_16 {
+        font-size: 16px;
+    }
+    .kbq-behance_16:before {
+        content: "\f811";
+    }
+    .kbq-github_16 {
+        font-size: 16px;
+    }
+    .kbq-github_16:before {
+        content: "\f812";
+    }
+    .kbq-github-alt_16 {
+        font-size: 16px;
+    }
+    .kbq-github-alt_16:before {
+        content: "\f813";
+    }
+    .kbq-gitlab_16 {
+        font-size: 16px;
+    }
+    .kbq-gitlab_16:before {
+        content: "\f814";
+    }
+    .kbq-habr_16 {
+        font-size: 16px;
+    }
+    .kbq-habr_16:before {
+        content: "\f815";
+    }
+    .kbq-habr-alt_16 {
+        font-size: 16px;
+    }
+    .kbq-habr-alt_16:before {
+        content: "\f816";
+    }
+    .kbq-linkedin_16 {
+        font-size: 16px;
+    }
+    .kbq-linkedin_16:before {
+        content: "\f817";
+    }
+    .kbq-linkedin-alt_16 {
+        font-size: 16px;
+    }
+    .kbq-linkedin-alt_16:before {
+        content: "\f818";
+    }
+    .kbq-mattermost_16 {
+        font-size: 16px;
+    }
+    .kbq-mattermost_16:before {
+        content: "\f819";
+    }
+    .kbq-telegram_16 {
+        font-size: 16px;
+    }
+    .kbq-telegram_16:before {
+        content: "\f81a";
+    }
+    .kbq-time-messenger_16 {
+        font-size: 16px;
+    }
+    .kbq-time-messenger_16:before {
+        content: "\f81b";
+    }
+    .kbq-time-messenger-alt_16 {
+        font-size: 16px;
+    }
+    .kbq-time-messenger-alt_16:before {
+        content: "\f81c";
+    }
+    .kbq-vk_16 {
+        font-size: 16px;
+    }
+    .kbq-vk_16:before {
+        content: "\f81d";
+    }
+    .kbq-vk-alt_16 {
+        font-size: 16px;
+    }
+    .kbq-vk-alt_16:before {
+        content: "\f81e";
+    }

package/fonts/kbq-icons.html

@@ -197,6 +197,18 @@
                     <span class='label'>vpn_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="vk_16" title="vk_16">
+                <span class="inner">
+                    <i class="kbq kbq-vk_16" aria-hidden="true"></i>
+                    <span class='label'>vk_16</span>
+                </span>
+            </div>
+            <div class="icon" data-name="vk-alt_16" title="vk-alt_16">
+                <span class="inner">
+                    <i class="kbq kbq-vk-alt_16" aria-hidden="true"></i>
+                    <span class='label'>vk-alt_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="user_24" title="user_24">
                 <span class="inner">
                     <i class="kbq kbq-user_24" aria-hidden="true"></i>
@@ -347,6 +359,18 @@
                     <span class='label'>topology-lines_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="time-messenger_16" title="time-messenger_16">
+                <span class="inner">
+                    <i class="kbq kbq-time-messenger_16" aria-hidden="true"></i>
+                    <span class='label'>time-messenger_16</span>
+                </span>
+            </div>
+            <div class="icon" data-name="time-messenger-alt_16" title="time-messenger-alt_16">
+                <span class="inner">
+                    <i class="kbq kbq-time-messenger-alt_16" aria-hidden="true"></i>
+                    <span class='label'>time-messenger-alt_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="thumbs-up_16" title="thumbs-up_16">
                 <span class="inner">
                     <i class="kbq kbq-thumbs-up_16" aria-hidden="true"></i>
@@ -395,6 +419,12 @@
                     <span class='label'>text-bold_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="telegram_16" title="telegram_16">
+                <span class="inner">
+                    <i class="kbq kbq-telegram_16" aria-hidden="true"></i>
+                    <span class='label'>telegram_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="telegram-circle_16" title="telegram-circle_16">
                 <span class="inner">
                     <i class="kbq kbq-telegram-circle_16" aria-hidden="true"></i>
@@ -1283,6 +1313,12 @@
                     <span class='label'>message-arrow-right_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="mattermost_16" title="mattermost_16">
+                <span class="inner">
+                    <i class="kbq kbq-mattermost_16" aria-hidden="true"></i>
+                    <span class='label'>mattermost_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="map_24" title="map_24">
                 <span class="inner">
                     <i class="kbq kbq-map_24" aria-hidden="true"></i>
@@ -1469,6 +1505,18 @@
                     <span class='label'>linux_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="linkedin_16" title="linkedin_16">
+                <span class="inner">
+                    <i class="kbq kbq-linkedin_16" aria-hidden="true"></i>
+                    <span class='label'>linkedin_16</span>
+                </span>
+            </div>
+            <div class="icon" data-name="linkedin-alt_16" title="linkedin-alt_16">
+                <span class="inner">
+                    <i class="kbq kbq-linkedin-alt_16" aria-hidden="true"></i>
+                    <span class='label'>linkedin-alt_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="link_16" title="link_16">
                 <span class="inner">
                     <i class="kbq kbq-link_16" aria-hidden="true"></i>
@@ -1667,6 +1715,18 @@
                     <span class='label'>handcuffs_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="habr_16" title="habr_16">
+                <span class="inner">
+                    <i class="kbq kbq-habr_16" aria-hidden="true"></i>
+                    <span class='label'>habr_16</span>
+                </span>
+            </div>
+            <div class="icon" data-name="habr-alt_16" title="habr-alt_16">
+                <span class="inner">
+                    <i class="kbq kbq-habr-alt_16" aria-hidden="true"></i>
+                    <span class='label'>habr-alt_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="grip-vertical_16" title="grip-vertical_16">
                 <span class="inner">
                     <i class="kbq kbq-grip-vertical_16" aria-hidden="true"></i>
@@ -1745,6 +1805,24 @@
                     <span class='label'>globe-dot_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="gitlab_16" title="gitlab_16">
+                <span class="inner">
+                    <i class="kbq kbq-gitlab_16" aria-hidden="true"></i>
+                    <span class='label'>gitlab_16</span>
+                </span>
+            </div>
+            <div class="icon" data-name="github_16" title="github_16">
+                <span class="inner">
+                    <i class="kbq kbq-github_16" aria-hidden="true"></i>
+                    <span class='label'>github_16</span>
+                </span>
+            </div>
+            <div class="icon" data-name="github-alt_16" title="github-alt_16">
+                <span class="inner">
+                    <i class="kbq kbq-github-alt_16" aria-hidden="true"></i>
+                    <span class='label'>github-alt_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="gear_24" title="gear_24">
                 <span class="inner">
                     <i class="kbq kbq-gear_24" aria-hidden="true"></i>
@@ -3293,6 +3371,12 @@
                     <span class='label'>bell-slash_16</span>
                 </span>
             </div>
+            <div class="icon" data-name="behance_16" title="behance_16">
+                <span class="inner">
+                    <i class="kbq kbq-behance_16" aria-hidden="true"></i>
+                    <span class='label'>behance_16</span>
+                </span>
+            </div>
             <div class="icon" data-name="bars-vertical_24" title="bars-vertical_24">
                 <span class="inner">
                     <i class="kbq kbq-bars-vertical_24" 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?df07f3b9e8047df60abc6c20a8e74de3") format("truetype"),
-url("./kbq-icons.woff?df07f3b9e8047df60abc6c20a8e74de3") format("woff");
+src: url("./kbq-icons.ttf?a0f4d4404688991e73ce373434df6a5e") format("truetype"),
+url("./kbq-icons.woff?a0f4d4404688991e73ce373434df6a5e") format("woff");
 }
 
 .kbq {
@@ -3854,3 +3854,87 @@ transform:rotate(0.001deg);
             content: "\f810";
         }
     }
+    .kbq-behance_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f811";
+        }
+    }
+    .kbq-github_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f812";
+        }
+    }
+    .kbq-github-alt_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f813";
+        }
+    }
+    .kbq-gitlab_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f814";
+        }
+    }
+    .kbq-habr_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f815";
+        }
+    }
+    .kbq-habr-alt_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f816";
+        }
+    }
+    .kbq-linkedin_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f817";
+        }
+    }
+    .kbq-linkedin-alt_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f818";
+        }
+    }
+    .kbq-mattermost_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f819";
+        }
+    }
+    .kbq-telegram_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f81a";
+        }
+    }
+    .kbq-time-messenger_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f81b";
+        }
+    }
+    .kbq-time-messenger-alt_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f81c";
+        }
+    }
+    .kbq-vk_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f81d";
+        }
+    }
+    .kbq-vk-alt_16 {
+        font-size: 16px;
+        &:before {
+            content: "\f81e";
+        }
+    }