feat(icons): new icons pack (#DS-2567)

.stylelintrc.js

@@ -31,7 +31,7 @@ const config = {
             {
                 ignoreFontFamilies: [
                     'Inter',
-                    'PT Mosaic Icons',
+                    'Koobiq Icons',
                     'JetBrains Mono'
                 ]
             }

angular.json

@@ -26,12 +26,12 @@
                         "assets": [
                             {
                                 "glob": "**/*",
-                                "input": "node_modules/@koobiq/icons/dist/svg",
+                                "input": "node_modules/@koobiq/icons/svg",
                                 "output": "/assets/SVGIcons"
                             },
                             {
                                 "glob": "**/*",
-                                "input": "node_modules/@koobiq/icons/dist/info",
+                                "input": "node_modules/@koobiq/icons/info",
                                 "output": "/assets/SVGIcons"
                             },
                             {

apps/docs/src/app/components/copy-button/copy-button.html

@@ -4,7 +4,7 @@
         kbq-link
         pseudo
     >
-        <i class="mc mc-check_16"></i>
+        <i class="kbq kbq-check_16"></i>
         <span class="kbq-link__text">{{ successLabelText }}</span>
     </span>
 }
@@ -15,7 +15,7 @@
         pseudo
     >
         <i
-            class="mc kbq-copy_16"
+            class="kbq kbq-square-multiple-o_16"
             (click)="copyContent()"
         ></i>
     </span>

apps/docs/src/app/components/footer/footer.component.html

@@ -9,7 +9,7 @@
         >
             <span>{{ selectedLanguages }}</span>
             <i
-                kbq-icon="mc-angle-down-S_16"
+                kbq-icon="kbq-chevron-down-s_16"
                 [color]="'contrast'"
             ></i>
         </div>
@@ -73,7 +73,7 @@
                 <span>.next</span>
             }
             <i
-                kbq-icon="mc-angle-down-S_16"
+                kbq-icon="kbq-chevron-down-s_16"
                 [color]="'contrast'"
             ></i>
 

apps/docs/src/app/components/icons-items/icon-items.ts

@@ -4,10 +4,10 @@ export interface IconItem {
     id: string;
     name: string;
     cssClass: string;
-    code: string;
+    code: number;
     description: string;
     size: number;
-    tags: string[];
+    tags: string | string[];
 }
 
 @Injectable()
@@ -17,18 +17,18 @@ export class IconItems {
 
     constructor(ICONS) {
         this.allIcons = Object.keys(ICONS).map((id) => {
-            const { code, tags, description } = ICONS[id];
+            const { codepoint, tags, description } = ICONS[id];
 
             const size = parseInt(id.split('_')[1]);
             this.sizes.add(size);
 
-            const cssClass = 'mc-'.concat(id);
+            const cssClass = 'kbq-'.concat(id);
 
             let name = id.replace(/_\d+/, '').replace(/-/g, ' ');
 
             name = name.charAt(0).toUpperCase() + name.slice(1);
 
-            return { id, name, cssClass, code, size, tags, description } as IconItem;
+            return { id, name, cssClass, code: parseInt(codepoint), size, tags, description } as IconItem;
         });
     }
 

apps/docs/src/app/components/navbar/navbar.template.html

@@ -46,7 +46,7 @@
             [kbqStyle]="'transparent'"
         >
             <i
-                kbq-icon="mc-theme_16"
+                kbq-icon="kbq-sun-moon_16"
                 [color]="'contrast'"
             ></i>
         </button>
@@ -62,8 +62,8 @@
         >
             <i
                 kbq-icon=""
-                [class.mc-close-L_32]="opened"
-                [class.mc-hamburger_32]="!opened"
+                [class.kbq-bars-horizontal_32]="!opened"
+                [class.kbq-xmark_32]="opened"
                 [color]="'contrast'"
             ></i>
         </button>

apps/docs/src/app/components/page-not-found/page-not-found.html

@@ -1,4 +1,4 @@
-<i kbq-icon="mc-cloud-404_256"></i>
+<i kbq-icon="kbq-cloud-404_256"></i>
 
 <div class="kbq-display-3">Страница не найдена</div>
 

apps/docs/src/app/components/sidenav/sidenav.component.html

@@ -31,10 +31,10 @@
             >
                 <span>{{ node.name }}</span>
                 <i
-                    kbq-icon-button="mc-angle-down-S_16"
+                    kbq-icon-button="kbq-chevron-down-s_16"
                     kbq-tree-node-toggle
                     class="docs-sidenav__category-icon"
-                    [class.mc_collapsed]="!treeControl.isExpanded(node)"
+                    [class.kbq_collapsed]="!treeControl.isExpanded(node)"
                     [style.visibility]="node.id === 'icons' ? 'hidden' : 'initial'"
                 ></i>
             </div>

apps/docs/src/app/components/stackblitz/stackblitz-button.html

@@ -1,2 +1,2 @@
 <span class="kbq-link__text">StackBlitz</span>
-<i kbq-icon="mc-external-link_16"></i>
+<i kbq-icon="kbq-arrow-up-right-from-square_16"></i>

apps/docs/src/app/containers/icons-viewer/icon-preview-modal/icon-preview-modal.component.ts

@@ -35,7 +35,8 @@ export class IconPreviewModalComponent implements AfterViewInit {
         KbqComponentColors.Contrast,
         KbqComponentColors.ContrastFade,
         KbqComponentColors.Error,
-        KbqComponentColors.Success
+        KbqComponentColors.Success,
+        KbqComponentColors.Warning
     ];
 
     selectedColorTheme: KbqComponentColors | string = KbqComponentColors.Theme;
@@ -50,7 +51,7 @@ export class IconPreviewModalComponent implements AfterViewInit {
     ) {}
 
     ngAfterViewInit(): void {
-        this.SVGLink = `assets/SVGIcons/${this.iconItem.cssClass}.svg`;
+        this.SVGLink = `assets/SVGIcons/${this.iconItem.id}.svg`;
     }
 
     onTagSelect(tag: string): void {
@@ -87,7 +88,12 @@ export class IconPreviewModalComponent implements AfterViewInit {
     }
 
     getCodeExampleText(): string {
-        return `<i kbq-icon="${this.iconItem.cssClass}"></i>`;
+        const color =
+            this.selectedColorTheme === KbqComponentColors.ContrastFade
+                ? ''
+                : ` [color]="'${this.selectedColorTheme}'"`;
+
+        return `<i kbq-icon="${this.iconItem.cssClass}"${color}></i>`;
     }
 
     getUnicode(): string {

apps/docs/src/app/containers/icons-viewer/icon-preview-modal/icon-preview-modal.scss

@@ -36,7 +36,7 @@
 
 .icon-preview-modal__description {
     .icon-unicode {
-        font-family: 'PT Mosaic Icons';
+        font-family: 'Koobiq Icons';
     }
 
     .kbq-tag {

apps/docs/src/app/containers/icons-viewer/icon-preview-modal/icon-preview-modal.template.html

@@ -7,7 +7,7 @@
         (click)="modal.close()"
     >
         <i
-            kbq-icon="mc-close-L_16"
+            kbq-icon="kbq-xmark_16"
             [color]="componentColors.Contrast"
         ></i>
     </button>
@@ -30,7 +30,7 @@
             >
                 <kbq-select-trigger>
                     <i
-                        kbq-icon="mc-circle-8_16"
+                        kbq-icon="kbq-circle-xs_16"
                         class="icon-preview-modal__palette-icon"
                         [color]="selectedColorTheme"
                     ></i>
@@ -43,7 +43,7 @@
                         [value]="paletteName"
                     >
                         <i
-                            kbq-icon="mc-circle-8_16"
+                            kbq-icon="kbq-circle-xs_16"
                             class="icon-preview-modal__palette-icon"
                             [color]="paletteName"
                         ></i>
@@ -59,15 +59,15 @@
                 href="{{ SVGLink }}"
                 kbq-button
             >
-                <i kbq-icon="mc-download_16"></i>
+                <i kbq-icon="kbq-arrow-down-to-line_16"></i>
                 Скачать SVG
             </a>
 
             <button
                 kbq-button
                 (click)="copySVG()"
             >
-                <i kbq-icon="mc-copy-o_16"></i>
+                <i kbq-icon="kbq-file-multiple-o_16"></i>
                 Скопировать SVG
             </button>
         </div>

apps/docs/src/app/containers/icons-viewer/icons-viewer-theme.scss

@@ -59,8 +59,4 @@
     .icon-preview-modal__description .kbq-badge {
         @include typography.kbq-typography-level-to-styles($config, text-big);
     }
-
-    .docs-icons-viewer__table-empty-results {
-        @include typography.kbq-typography-level-to-styles($config, display-3);
-    }
 }

apps/docs/src/app/containers/icons-viewer/icons-viewer.component.ts

@@ -54,7 +54,7 @@ export class IconsViewerComponent implements OnDestroy {
         private changeDetectorRef: ChangeDetectorRef,
         private elementRef: ElementRef
     ) {
-        this.http.get('assets/SVGIcons/mc-icons-info.json', { responseType: 'json' }).subscribe((data) => {
+        this.http.get('assets/SVGIcons/kbq-icons-info.json', { responseType: 'json' }).subscribe((data) => {
             this.iconItems = new IconItems(data);
 
             this.availableSizes = Array.from(this.iconItems.sizes).sort((a, b) => a - b);
@@ -91,7 +91,8 @@ export class IconsViewerComponent implements OnDestroy {
                         .filter(
                             (item) =>
                                 item.name.toLowerCase().includes(lowered) ||
-                                item.tags.some((tag) => tag.toLowerCase().includes(lowered))
+                                (Array.isArray(item.tags) &&
+                                    item.tags.some((tag) => tag.toLowerCase().includes(lowered)))
                         );
 
                     return items.length ? items : undefined;

apps/docs/src/app/containers/icons-viewer/icons-viewer.module.ts

@@ -7,6 +7,7 @@ import { KbqBadgeModule } from '@koobiq/components/badge';
 import { KbqButtonModule } from '@koobiq/components/button';
 import { KbqHighlightModule } from '@koobiq/components/core';
 import { KbqDlModule } from '@koobiq/components/dl';
+import { KbqEmptyStateModule } from '@koobiq/components/empty-state';
 import { KbqFormFieldModule } from '@koobiq/components/form-field';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqInputModule } from '@koobiq/components/input';
@@ -44,6 +45,7 @@ import { IconsViewerComponent } from './icons-viewer.component';
         NavbarModule,
         KbqButtonModule,
         AnchorsModule,
+        KbqEmptyStateModule,
         NgClass,
         AsyncPipe,
         TitleCasePipe

apps/docs/src/app/containers/icons-viewer/icons-viewer.template.html

@@ -8,7 +8,7 @@
 
     <kbq-form-field>
         <i
-            kbq-icon="mc-search_16"
+            kbq-icon="kbq-magnifying-glass_16"
             kbqPrefix
             [color]="themePalette.Secondary"
         ></i>
@@ -53,6 +53,10 @@
     }
 
     @if (searchControl.value && !filteredIcons.value) {
-        <div class="docs-icons-viewer__table-empty-results">Ничего не найдено</div>
+        <div class="docs-icons-viewer__table-empty-results">
+            <kbq-empty-state [big]="true">
+                <div kbq-empty-state-title>Ничего не найдено</div>
+            </kbq-empty-state>
+        </div>
     }
 </div>

apps/docs/src/assets/stackblitz/package.json

@@ -20,14 +20,14 @@
         "@angular/router": "^17.2.0",
         "@koobiq/cdk": "${version}",
         "@koobiq/components": "${version}",
-        "@koobiq/icons": "^7.1.0",
+        "@koobiq/icons": "^9.0.0",
         "@koobiq/angular-luxon-adapter": "${version}",
         "@koobiq/angular-moment-adapter": "${version}",
         "@koobiq/date-adapter": "^3.1.2",
         "@koobiq/moment-date-adapter": "^3.1.2",
         "@koobiq/luxon-date-adapter": "^3.1.2",
         "@koobiq/date-formatter": "^3.1.2",
-        "@koobiq/design-tokens": "3.5.1",
+        "@koobiq/design-tokens": "^3.6.0",
         "marked": "^9.0.0",
         "@messageformat/core": "^3.0.0",
         "moment": "~2.29.2",

apps/docs/src/assets/stackblitz/src/styles.scss

@@ -1,5 +1,5 @@
 @import '@koobiq/components/prebuilt-themes/light-theme.css';
-@import '@koobiq/icons/dist/fonts/mc-icons';
+@import '@koobiq/icons/fonts/kbq-icons';
 
 body {
     font-family: Roboto, Arial, sans-serif;

apps/docs/src/main.scss

@@ -1,4 +1,4 @@
-@use '@koobiq/icons/dist/fonts/mc-icons';
+@use '@koobiq/icons/fonts/kbq-icons';
 
 @use 'highlightjs/material-dark' as *;
 @use 'highlightjs/material-light' as *;

apps/docs/src/styles/_docsearch.scss

@@ -2,7 +2,7 @@
 
 @use '@docsearch/css/dist/style.scss';
 @use 'koobiq/default-theme/variables' as *;
-@use '@koobiq/icons/dist/fonts/mc-icons';
+@use '@koobiq/icons/fonts/kbq-icons';
 
 .DocSearch-Button {
     padding: 0 $button-size-horizontal-padding;
@@ -32,8 +32,8 @@
 }
 
 .DocSearch-Button-Container::before {
-    @extend .mc;
-    @extend .mc-search_16;
+    @extend .kbq;
+    @extend .kbq-magnifying-glass_16;
 
     @media (width <= 768px) {
         font-size: 20px;
@@ -67,8 +67,8 @@
 }
 
 .DocSearch-MagnifierLabel::before {
-    @extend .mc;
-    @extend .mc-search_16;
+    @extend .kbq;
+    @extend .kbq-magnifying-glass_16;
 
     color: $light-icon-contrast-fade;
 }
@@ -87,8 +87,8 @@
 }
 
 .DocSearch-Reset::before {
-    @extend .mc;
-    @extend .mc-close-circle_16;
+    @extend .kbq;
+    @extend .kbq-xmark-circle_16;
 }
 
 .DocSearch-Reset:hover {