refactor: correct resolve path to icons (#8510)

Co-authored-by: taiga-family-bot <[email protected]>

projects/cdk/constants/used-icons.ts

@@ -40,8 +40,6 @@ export const TUI_USED_ICONS = [
     '@tui.circle-help',
     '@tui.x',
     '@tui.chevron-right',
-    '@tui.material',
-    '@tui.fa',
     '@tui.chevron-left',
     '@tui.calendar',
     '@tui.minus',

projects/core/tokens/icon-resolver.ts

@@ -11,27 +11,10 @@ export const TUI_ICON_START_RESOLVER = tuiCreateTokenFromFactory<
 >(() => {
     const path = inject(TUI_ASSETS_PATH);
 
-    return (icon) => {
-        if (!icon || icon.includes('/')) {
-            return icon;
-        }
-
-        let directory = '';
-
-        if (icon.includes('@tui.material')) {
-            directory = 'material/';
-        } else if (icon.includes('@tui.fa')) {
-            directory = 'fontawesome/';
-        }
-
-        const name = icon
-            .replace(/^@tui./, '')
-            .replace(/^material.|^fa./, '')
-            .split('.')
-            .join('/');
-
-        return `${path}/${directory}${name}.svg`;
-    };
+    return (icon) =>
+        !icon || icon.includes('/')
+            ? icon
+            : `${path}/${icon.replace('@tui.', '').split('.').join('/')}.svg`;
 });
 
 export function tuiInjectIconResolver(): TuiStringHandler<string> {

projects/demo/project.json

@@ -51,12 +51,12 @@
                     {
                         "glob": "**/*",
                         "input": "projects/icons-material/src",
-                        "output": "assets/taiga-ui/icons/material"
+                        "output": "assets/taiga-ui/icons/"
                     },
                     {
                         "glob": "**/*",
                         "input": "projects/icons-fontawesome/src",
-                        "output": "assets/taiga-ui/icons/fontawesome"
+                        "output": "assets/taiga-ui/icons/"
                     }
                 ],
                 "baseHref": "./",

projects/demo/src/modules/app/app.routes.ts

@@ -191,7 +191,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.IconsLucide,
-        loadComponent: async () => import('../icons/lucide'),
+        loadComponent: async () => import('../icons/icons'),
         title: 'Icons',
     }),
     route({

projects/demo/src/modules/icons/fontawesome/examples/assets.md → projects/demo/src/modules/icons/fontawesome/assets.md

@@ -8,7 +8,7 @@
             {
               "glob": "**/*",
               "input": "node_modules/@taiga-ui/icons-fontawesome/src",
-              "output": "assets/taiga-ui/icons/fontawesome"
+              "output": "assets/taiga-ui/icons/"
             }
           ]
         }

projects/demo/src/modules/icons/fontawesome/index.ts

@@ -9,5 +9,5 @@ import {TuiDemo} from '@demo/utils';
     changeDetection,
 })
 export default class Page {
-    protected readonly assets = import('./examples/assets.md?raw');
+    protected readonly assets = import('./assets.md?raw');
 }

projects/demo/src/modules/icons/icons/assets.md

@@ -0,0 +1,19 @@
+```json
+{
+  "projects": {
+    "demo": {
+      "architect": {
+        "build": {
+          "assets": [
+            {
+              "glob": "**/*",
+              "input": "node_modules/@taiga-ui/icons/src",
+              "output": "assets/taiga-ui/icons/"
+            }
+          ]
+        }
+      }
+    }
+  }
+}
+```

projects/demo/src/modules/icons/icons/examples/1/index.html

@@ -0,0 +1,15 @@
+<tui-icon icon="@tui.accessibility" />
+
+<img
+    alt=""
+    [src]="'@tui.badge-pound-sterling' | tuiIcon"
+/>
+
+<tui-icon
+    icon="@tui.twitter"
+    [style.color]="'var(--tui-background-accent-1)'"
+/>
+
+<tui-icon icon="@tui.square-arrow-out-up-left" />
+
+<tui-icon icon="@tui.gamepad-2" />

projects/demo/src/modules/icons/icons/examples/1/index.less

@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    gap: 0.625rem;
+}

projects/demo/src/modules/icons/icons/examples/1/index.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiIcon, TuiIconPipe} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    imports: [TuiIcon, TuiIconPipe],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}

projects/demo/src/modules/icons/icons/index.html

@@ -0,0 +1,47 @@
+<tui-doc-page
+    header="Icons"
+    package="icons"
+    type="icons"
+>
+    <ng-template pageTab="Overview">
+        <h2 class="title">Lucide (default) icons pack</h2>
+
+        <p>
+            Open source theme for Taiga UI uses processed
+            <a
+                href="https://lucide.dev/"
+                rel="noreferrer"
+                target="_blank"
+                tuiLink
+            >
+                Lucide Icons
+            </a>
+            . You can browse all the icons from this pack and find the one that suits you
+            <a
+                href="https://lucide.dev/icons/"
+                rel="noreferrer"
+                target="_blank"
+                tuiLink
+            >
+                here
+            </a>
+            .
+        </p>
+
+        <tui-doc-example
+            id="basic"
+            heading="Basic"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
+        />
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <tui-doc-code code="npm i @taiga-ui/icons" />
+
+        <tui-doc-code
+            filename="angular.json"
+            [code]="assets"
+        />
+    </ng-template>
+</tui-doc-page>

projects/demo/src/modules/icons/lucide/index.ts → projects/demo/src/modules/icons/icons/index.ts

@@ -15,6 +15,8 @@ import {COLORED_ICONS, MONO_ICONS} from './icons.tokens';
     changeDetection,
 })
 export default class Page {
+    protected readonly assets = import('./assets.md?raw');
+
     protected readonly icons = {
         Mono: MONO_ICONS,
         Colored: COLORED_ICONS,

projects/demo/src/modules/icons/material/examples/assets.md → projects/demo/src/modules/icons/material/assets.md

@@ -8,7 +8,7 @@
             {
               "glob": "**/*",
               "input": "node_modules/@taiga-ui/icons-material/src",
-              "output": "assets/taiga-ui/icons/material"
+              "output": "assets/taiga-ui/icons/"
             }
           ]
         }

projects/demo/src/modules/icons/material/index.ts

@@ -9,5 +9,5 @@ import {TuiDemo} from '@demo/utils';
     changeDetection,
 })
 export default class Page {
-    protected readonly assets = import('./examples/assets.md?raw');
+    protected readonly assets = import('./assets.md?raw');
 }

projects/demo/used-icons.ts

@@ -96,6 +96,11 @@ export const TUI_USED_ICONS = [
     '@tui.chevron-up',
     '@tui.play',
     '@tui.pause',
+    '@tui.accessibility',
+    '@tui.badge-pound-sterling',
+    '@tui.twitter',
+    '@tui.square-arrow-out-up-left',
+    '@tui.gamepad-2',
     '@tui.electron-mono',
     '@tui.maestro-mono',
     '@tui.mir-mono',

projects/icons-fontawesome/scripts/prepare-icons.ts

@@ -27,7 +27,7 @@ import path from 'node:path';
                     '<$1 vector-effect="non-scaling-stroke"',
                 );
 
-            const filePath = path.join(dest, type, filename);
+            const filePath = path.join(dest, 'fa', type, filename);
 
             fs.mkdirSync(path.dirname(filePath), {recursive: true});
             fs.writeFileSync(filePath, content);
@@ -83,7 +83,10 @@ import path from 'node:path';
     ].forEach((filename) => {
         const filePath = path.join('projects/icons/src', `${filename}.svg`);
 
-        fs.writeFileSync(path.join(dest, `${filename}.svg`), filePath);
+        fs.writeFileSync(
+            path.join(dest, `${filename}.svg`),
+            fs.readFileSync(path.join(filePath), 'utf-8'),
+        );
 
         console.info('copied:', filePath);
     });