refactor!: use tui-icon instead tui-svg (#7658)

Co-authored-by: taiga-family-bot <[email protected]> Co-authored-by: Alex Inkin <[email protected]>
taiga-family · Jun 13, 2024 · 34654f3 · 34654f3
1 parent 45af1aa
commit 34654f3
Show file tree

Hide file tree

Showing 22 changed files with 137 additions and 54 deletions.
diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts
@@ -36,9 +36,9 @@ import {
     TUI_COMMON_ICONS,
     TuiDataList,
     TuiExpand,
+    TuiIconComponent,
     TuiLinkDirective,
     TuiScrollbarComponent,
-    TuiSvgComponent,
     TuiTextfieldOptionsDirective,
 } from '@taiga-ui/core';
 import {TuiAccordion} from '@taiga-ui/kit';
@@ -66,7 +66,7 @@ import {
         AsyncPipe,
         NgForOf,
         NgIf,
-        TuiSvgComponent,
+        TuiIconComponent,
         PolymorpheusModule,
         RouterLink,
         TuiScrollbarComponent,

diff --git a/projects/addon-doc/components/navigation/navigation.template.html b/projects/addon-doc/components/navigation/navigation.template.html
@@ -24,10 +24,10 @@
                         [target]="item.target || '_self'"
                     >
                         {{ item.title }}
-                        <tui-svg
+                        <tui-icon
                             *polymorpheusOutlet="item.icon as icon"
                             class="t-icon"
-                            [src]="icon"
+                            [icon]="icon"
                         />
                     </a>
 
@@ -41,10 +41,10 @@
                             (click)="onClick(input)"
                         >
                             {{ item.title }}
-                            <tui-svg
+                            <tui-icon
                                 *polymorpheusOutlet="item.icon as icon"
                                 class="t-icon"
-                                [src]="icon"
+                                [icon]="icon"
                             />
                         </a>
                     </ng-template>
@@ -103,10 +103,10 @@
                     [target]="item.target || '_self'"
                 >
                     {{ item.title }}
-                    <tui-svg
+                    <tui-icon
                         *polymorpheusOutlet="item.icon as icon"
                         class="t-icon"
-                        [src]="icon"
+                        [icon]="icon"
                     />
                 </a>
 
@@ -122,10 +122,10 @@
                         (click)="closeMenu()"
                     >
                         {{ item.title }}
-                        <tui-svg
+                        <tui-icon
                             *polymorpheusOutlet="item.icon as icon"
                             class="t-icon"
-                            [src]="icon"
+                            [icon]="icon"
                         />
                     </a>
                 </ng-template>
@@ -144,16 +144,16 @@
                         class="t-sublink t-sublink_subsection"
                         (click)="onGroupClick(index)"
                     >
-                        <tui-svg
+                        <tui-icon
                             class="t-chevron"
                             [class.t-chevron_active]="!!openPagesGroupsArr[index]"
-                            [src]="icons.more"
+                            [icon]="icons.more"
                         />
                         {{ item.title }}
-                        <tui-svg
+                        <tui-icon
                             *polymorpheusOutlet="item.icon as icon"
                             class="t-icon"
-                            [src]="icon"
+                            [icon]="icon"
                         />
                     </button>
                     <tui-expand
@@ -171,10 +171,10 @@
                                     [target]="subPage.target || '_self'"
                                 >
                                     {{ subPage.title }}
-                                    <tui-svg
+                                    <tui-icon
                                         *polymorpheusOutlet="subPage.icon as icon"
                                         class="t-icon"
-                                        [src]="icon"
+                                        [icon]="icon"
                                     />
                                 </a>
 
@@ -191,10 +191,10 @@
                                         (click)="closeMenu()"
                                     >
                                         {{ subPage.title }}
-                                        <tui-svg
+                                        <tui-icon
                                             *polymorpheusOutlet="subPage.icon as icon"
                                             class="t-icon"
-                                            [src]="icon"
+                                            [icon]="icon"
                                         />
                                     </a>
                                 </ng-template>

diff --git a/projects/addon-mobile/components/tab-bar/tab-bar-item.component.ts b/projects/addon-mobile/components/tab-bar/tab-bar-item.component.ts
@@ -2,15 +2,15 @@ import {NgIf} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
 import {
     TUI_ANIMATIONS_SPEED,
+    TuiIconComponent,
     tuiScaleIn,
-    TuiSvgComponent,
     tuiToAnimationOptions,
 } from '@taiga-ui/core';
 
 @Component({
     standalone: true,
     selector: 'button[tuiTabBarItem], a[tuiTabBarItem]',
-    imports: [TuiSvgComponent, NgIf],
+    imports: [NgIf, TuiIconComponent],
     templateUrl: './tab-bar-item.template.html',
     styleUrls: ['./tab-bar-item.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/projects/addon-mobile/components/tab-bar/tab-bar-item.style.less b/projects/addon-mobile/components/tab-bar/tab-bar-item.style.less
@@ -26,6 +26,7 @@
     height: 1.75rem;
     margin: 0.375rem 0 0.125rem;
     pointer-events: none;
+    border: 0.125rem solid transparent;
 }
 
 .t-wrapper {

diff --git a/projects/addon-mobile/components/tab-bar/tab-bar-item.template.html b/projects/addon-mobile/components/tab-bar/tab-bar-item.template.html
@@ -1,6 +1,6 @@
-<tui-svg
+<tui-icon
     class="t-icon"
-    [src]="icon"
+    [icon]="icon"
 />
 <span class="t-wrapper">
     <span

diff --git a/projects/addon-table/components/reorder/reorder.component.ts b/projects/addon-table/components/reorder/reorder.component.ts
@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import {TUI_TABLE_SHOW_HIDE_MESSAGE} from '@taiga-ui/addon-table/tokens';
 import type {TuiContext} from '@taiga-ui/cdk';
-import {TuiButtonDirective, TuiSvgComponent} from '@taiga-ui/core';
+import {TuiButtonDirective, TuiIconComponent} from '@taiga-ui/core';
 import {TuiTiles} from '@taiga-ui/kit';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
@@ -23,7 +23,7 @@ import {TUI_REORDER_OPTIONS} from './reorder.options';
     imports: [
         TuiTiles,
         NgForOf,
-        TuiSvgComponent,
+        TuiIconComponent,
         TuiButtonDirective,
         AsyncPipe,
         PolymorpheusModule,

diff --git a/projects/addon-table/components/reorder/reorder.style.less b/projects/addon-table/components/reorder/reorder.style.less
@@ -37,6 +37,7 @@
 .t-icon {
     margin-right: 0.5rem;
     color: var(--tui-base-05);
+    border: 0.25rem solid transparent;
 }
 
 .t-button {

diff --git a/projects/addon-table/components/reorder/reorder.template.html b/projects/addon-table/components/reorder/reorder.template.html
@@ -11,9 +11,9 @@
                 tuiTileHandle
                 class="t-draggable"
             >
-                <tui-svg
+                <tui-icon
                     class="t-icon"
-                    [src]="options.icons.drag"
+                    [icon]="options.icons.drag"
                 />
                 <ng-container *polymorpheusOutlet="content as template; context: {$implicit: item, index: index}">
                     {{ template }}

diff --git a/projects/addon-table/components/table-pagination/table-pagination.component.ts b/projects/addon-table/components/table-pagination/table-pagination.component.ts
@@ -16,8 +16,8 @@ import {
     TuiDataList,
     TuiDropdownDirective,
     TuiDropdownOpenDirective,
+    TuiIconComponent,
     TuiLinkDirective,
-    TuiSvgComponent,
 } from '@taiga-ui/core';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
@@ -41,7 +41,7 @@ export interface TuiTablePagination {
         PolymorpheusModule,
         NgForOf,
         TuiDropdownOpenDirective,
-        TuiSvgComponent,
+        TuiIconComponent,
         TuiButtonDirective,
     ],
     templateUrl: './table-pagination.template.html',

diff --git a/projects/addon-table/components/table-pagination/table-pagination.style.less b/projects/addon-table/components/table-pagination/table-pagination.style.less
@@ -21,8 +21,9 @@
 }
 
 .t-checkmark {
-    min-width: 1.5rem;
-    border-left: 5px solid transparent;
+    min-width: 1rem;
+    font-size: 1rem;
+    margin-inline-start: 0.25rem;
 }
 
 .t-back {

diff --git a/projects/addon-table/components/table-pagination/table-pagination.template.html b/projects/addon-table/components/table-pagination/table-pagination.template.html
@@ -33,10 +33,10 @@
                         >
                             {{ text }}
                         </ng-container>
-                        <tui-svg
+                        <tui-icon
                             *ngIf="item === size; else fakeIcon"
                             class="t-checkmark"
-                            [src]="commonIcons.check"
+                            [icon]="commonIcons.check"
                         />
 
                         <ng-template #fakeIcon>

diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts
@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import type {TuiComparator} from '@taiga-ui/addon-table/types';
 import {tuiDefaultSort} from '@taiga-ui/cdk';
-import {TuiSvgComponent} from '@taiga-ui/core';
+import {TuiIconComponent} from '@taiga-ui/core';
 
 import {TuiHeadDirective} from '../directives/head.directive';
 import {TuiResizedDirective} from '../directives/resized.directive';
@@ -20,7 +20,7 @@ import {TUI_TABLE_OPTIONS} from '../table.options';
 @Component({
     standalone: true,
     selector: 'th[tuiTh]',
-    imports: [TuiResizedDirective, NgIf, NgTemplateOutlet, TuiSvgComponent, AsyncPipe],
+    imports: [TuiResizedDirective, NgIf, NgTemplateOutlet, TuiIconComponent, AsyncPipe],
     templateUrl: './th.template.html',
     styleUrls: ['./th.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/projects/addon-table/components/table/th/th.style.less b/projects/addon-table/components/table/th/th.style.less
@@ -146,3 +146,7 @@
         opacity: 1;
     }
 }
+
+.t-icon {
+    border: 0.25rem solid transparent;
+}
diff --git a/projects/addon-table/components/table/th/th.template.html b/projects/addon-table/components/table/th/th.template.html
@@ -7,9 +7,9 @@
 >
     <ng-container [ngTemplateOutlet]="content" />
     {{ table.change$ | async }}
-    <tui-svg
-        class="t-sort-icon"
-        [src]="icon"
+    <tui-icon
+        class="t-icon"
+        [icon]="icon"
     />
 </button>
 <ng-template #content>

diff --git a/projects/core/components/tooltip/tooltip.module.ts b/projects/core/components/tooltip/tooltip.module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {TuiSvgComponent} from '@taiga-ui/core/components/svg';
+import {TuiIconComponent} from '@taiga-ui/core/components/icon';
 import {TuiAppearanceDirective} from '@taiga-ui/core/directives';
 import {TuiHint} from '@taiga-ui/core/directives/hint';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
@@ -10,7 +10,7 @@ import {TuiTooltipComponent} from './tooltip.component';
 @NgModule({
     imports: [
         CommonModule,
-        TuiSvgComponent,
+        TuiIconComponent,
         TuiHint,
         PolymorpheusModule,
         TuiAppearanceDirective,

diff --git a/projects/core/components/tooltip/tooltip.style.less b/projects/core/components/tooltip/tooltip.style.less
@@ -24,3 +24,7 @@
     width: 100%;
     height: 100%;
 }
+
+.t-icon {
+    border: 0.25rem solid transparent;
+}
diff --git a/projects/core/components/tooltip/tooltip.template.html b/projects/core/components/tooltip/tooltip.template.html
@@ -12,8 +12,9 @@
     [tuiHintHideDelay]="hideDelay"
     [tuiHintShowDelay]="showDelay"
 >
-    <tui-svg
+    <tui-icon
         *polymorpheusOutlet="icon as src"
-        [src]="src"
+        class="t-icon"
+        [icon]="src"
     />
 </span>
diff --git a/projects/icons/all.ts b/projects/icons/all.ts
@@ -996,6 +996,9 @@ const tuiIconDrag =
 const tuiIconDragLarge =
     '<svg width="1.5em" height="1.5em" focusable="false" xmlns="http://www.w3.org/2000/svg"><g xmlns="http://www.w3.org/2000/svg"><svg width="1.5em" height="1.5em" x="50%" y="50%" fill="none" overflow="visible" viewBox="0 0 24 24"><svg x="-12" y="-12" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12a1 1 0 1 0-2 0 1 1 0 0 0 2 0m8 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0M9 5a1 1 0 1 0-2 0 1 1 0 0 0 2 0m8 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0M9 19a1 1 0 1 0-2 0 1 1 0 0 0 2 0m8 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0" vector-effect="non-scaling-stroke"/></svg></svg></g></svg>';
 
+const tuiIconDragOutline =
+    '<svg width="1em" height="1em" focusable="false" xmlns="http://www.w3.org/2000/svg"><g xmlns="http://www.w3.org/2000/svg"><svg width="1em" height="1em" x="50%" y="50%" overflow="visible" viewBox="0 0 16 16"><svg x="-8" y="-8"><path fill="currentColor" d="M10 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2m0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2m0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2M6 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2m0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2m0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2" vector-effect="non-scaling-stroke"/></svg></svg></g></svg>';
+
 const tuiIconDribbble =
     '<svg width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><g xmlns="http://www.w3.org/2000/svg"><svg width="1em" height="1em" x="50%" y="50%" overflow="visible" viewBox="0 0 16 16"><svg x="-8" y="-8"><svg width="16" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32"/></svg></svg></svg></g></svg>';
 
@@ -1650,6 +1653,9 @@ const tuiIconMastercard =
 const tuiIconMastercardMono =
     '<svg preserveAspectRatio="xMidYMid meet" style="width:inherit;height:inherit;max-width:2rem;max-height:2rem" xmlns="http://www.w3.org/2000/svg"><g xmlns="http://www.w3.org/2000/svg"><svg x="50%" y="50%" overflow="visible" preserveAspectRatio="xMidYMid meet" style="width:inherit;height:inherit;max-width:2rem;max-height:2rem" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><svg x="-16" y="-16"><path fill="currentColor" fill-rule="evenodd" d="M15.833 9.378c-2.21 1.467-3.666 3.967-3.666 6.804s1.455 5.336 3.666 6.804a8.26 8.26 0 0 1-4.583 1.378C6.694 24.364 3 20.7 3 16.182S6.694 8 11.25 8a8.26 8.26 0 0 1 4.583 1.378m0 13.608c2.211-1.468 3.667-3.967 3.667-6.804s-1.456-5.336-3.667-6.804A8.26 8.26 0 0 1 20.417 8c4.556 0 8.25 3.663 8.25 8.182s-3.694 8.182-8.25 8.182a8.26 8.26 0 0 1-4.584-1.378m0-12.37a7.14 7.14 0 0 0 0 11.13 7.14 7.14 0 0 0 0-11.13" clip-rule="evenodd" vector-effect="non-scaling-stroke"/></svg></svg></g></svg>';
 
+const tuiIconMastercardMonoOutline =
+    '<svg preserveAspectRatio="xMidYMid meet" style="width:inherit;height:inherit;max-width:2rem;max-height:2rem" xmlns="http://www.w3.org/2000/svg"><g xmlns="http://www.w3.org/2000/svg"><svg x="50%" y="50%" overflow="visible" preserveAspectRatio="xMidYMid meet" style="width:inherit;height:inherit;max-width:2rem;max-height:2rem" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><svg x="-16" y="-16"><path fill="currentColor" fill-rule="evenodd" d="M15.833 9.378c-2.21 1.467-3.666 3.967-3.666 6.804s1.455 5.336 3.666 6.804a8.26 8.26 0 0 1-4.583 1.378C6.694 24.364 3 20.7 3 16.182S6.694 8 11.25 8a8.26 8.26 0 0 1 4.583 1.378m0 13.608c2.211-1.468 3.667-3.967 3.667-6.804s-1.456-5.336-3.667-6.804A8.26 8.26 0 0 1 20.417 8c4.556 0 8.25 3.663 8.25 8.182s-3.694 8.182-8.25 8.182a8.26 8.26 0 0 1-4.584-1.378m0-12.37a7.14 7.14 0 0 0 0 11.13 7.14 7.14 0 0 0 0-11.13" clip-rule="evenodd" vector-effect="non-scaling-stroke"/></svg></svg></g></svg>';
+
 const tuiIconMastercardOutline =
     '<svg overflow="visible" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g><path fill="#FBB735" d="M15.833 22.986c2.211-1.468 3.667-3.967 3.667-6.804s-1.456-5.336-3.667-6.804A8.26 8.26 0 0 1 20.417 8c4.556 0 8.25 3.663 8.25 8.182s-3.694 8.182-8.25 8.182a8.26 8.26 0 0 1-4.584-1.378"/><path fill="#F03727" d="M15.833 9.378c-2.21 1.468-3.666 3.967-3.666 6.804s1.455 5.336 3.666 6.804a8.26 8.26 0 0 1-4.583 1.378C6.694 24.364 3 20.7 3 16.182S6.694 8 11.25 8a8.26 8.26 0 0 1 4.583 1.378"/><path fill="#F6772D" d="M15.833 9.378c2.211 1.468 3.667 3.967 3.667 6.804s-1.456 5.336-3.667 6.804c-2.21-1.468-3.666-3.967-3.666-6.804s1.455-5.336 3.666-6.804"/></g></svg>';
 
@@ -2424,6 +2430,9 @@ const tuiIconSortDescendingOutline =
 const tuiIconSortOff =
     '<svg width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><g xmlns="http://www.w3.org/2000/svg"><svg width="1em" height="1em" x="50%" y="50%" overflow="visible" viewBox="0 0 16 16"><svg x="-8" y="-8"><svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" fill-rule="evenodd" d="M11.707 4.879a1 1 0 0 1-1.414 1.414L8 4 5.707 6.293a1 1 0 1 1-1.414-1.414l2.293-2.293a2 2 0 0 1 2.828 0zM4.293 10.707a1 1 0 0 1 1.414-1.414L8 11.586l2.293-2.293a1 1 0 1 1 1.414 1.414L9.414 13a2 2 0 0 1-2.828 0z" clip-rule="evenodd" vector-effect="non-scaling-stroke"/></svg></svg></svg></g></svg>';
 
+const tuiIconSortOffOutline =
+    '<svg width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><g xmlns="http://www.w3.org/2000/svg"><svg width="1em" height="1em" x="50%" y="50%" overflow="visible" viewBox="0 0 16 16"><svg x="-8" y="-8"><svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" fill-rule="evenodd" d="M11.707 4.879a1 1 0 0 1-1.414 1.414L8 4 5.707 6.293a1 1 0 1 1-1.414-1.414l2.293-2.293a2 2 0 0 1 2.828 0zM4.293 10.707a1 1 0 0 1 1.414-1.414L8 11.586l2.293-2.293a1 1 0 1 1 1.414 1.414L9.414 13a2 2 0 0 1-2.828 0z" clip-rule="evenodd" vector-effect="non-scaling-stroke"/></svg></svg></svg></g></svg>';
+
 const tuiIconSound =
     '<svg width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><g xmlns="http://www.w3.org/2000/svg"><svg width="1em" height="1em" x="50%" y="50%" overflow="visible" viewBox="0 0 16 16"><svg x="-8" y="-8"><svg width="16" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 5 6 9H2v6h4l5 4zM19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" vector-effect="non-scaling-stroke"/></svg></svg></svg></g></svg>';
 
@@ -3454,6 +3463,7 @@ export {
     tuiIconDraft,
     tuiIconDrag,
     tuiIconDragLarge,
+    tuiIconDragOutline,
     tuiIconDribbble,
     tuiIconDribbbleLarge,
     tuiIconDribbbleOutline,
@@ -3672,6 +3682,7 @@ export {
     tuiIconMapPinOutline,
     tuiIconMastercard,
     tuiIconMastercardMono,
+    tuiIconMastercardMonoOutline,
     tuiIconMastercardOutline,
     tuiIconMaximize,
     tuiIconMaximize2,
@@ -3930,6 +3941,7 @@ export {
     tuiIconSortDescending,
     tuiIconSortDescendingOutline,
     tuiIconSortOff,
+    tuiIconSortOffOutline,
     tuiIconSound,
     tuiIconSoundLarge,
     tuiIconSoundOff,

diff --git a/projects/icons/src/tuiIconDragOutline.svg b/projects/icons/src/tuiIconDragOutline.svg