feat: add @taiga-ui/icons-fontawesome (#8493)

Co-authored-by: taiga-family-bot <taiga-family-bot@users.noreply.github.com>

.cspell.json

@@ -17,7 +17,7 @@
         "**/addon-commerce/utils/get-currency-symbol.ts",
         "**/demo-playwright/stubs"
     ],
-    "ignoreWords": ["preid", "Quarterpounder", "tuilabel"],
+    "ignoreWords": ["preid", "Quarterpounder", "tuilabel", "fontawesome", "fortawesome", "svgs"],
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [
         {

projects/cdk/constants/used-icons.ts

@@ -41,6 +41,7 @@ export const TUI_USED_ICONS = [
     '@tui.x',
     '@tui.chevron-right',
     '@tui.material',
+    '@tui.fa',
     '@tui.chevron-left',
     '@tui.calendar',
     '@tui.minus',

projects/core/tokens/icon-resolver.ts

@@ -16,10 +16,17 @@ export const TUI_ICON_START_RESOLVER = tuiCreateTokenFromFactory<
             return icon;
         }
 
-        const directory = icon.includes('@tui.material') ? 'material/' : '';
+        let directory = '';
+
+        if (icon.includes('@tui.material')) {
+            directory = 'material/';
+        } else if (icon.includes('@tui.fa')) {
+            directory = 'fontawesome/';
+        }
+
         const name = icon
             .replace(/^@tui./, '')
-            .replace(/^material./, '')
+            .replace(/^material.|^fa./, '')
             .split('.')
             .join('/');
 

projects/demo/project.json

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

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

@@ -197,7 +197,12 @@ export const ROUTES: Routes = [
     route({
         path: DemoRoute.IconsMaterial,
         loadComponent: async () => import('../icons/material'),
-        title: 'Icons-material',
+        title: 'Icons Material',
+    }),
+    route({
+        path: DemoRoute.IconsFontawesome,
+        loadComponent: async () => import('../icons/fontawesome'),
+        title: 'Icons Fontawesome',
     }),
     route({
         path: DemoRoute.Label,

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

@@ -68,6 +68,7 @@ export const DemoRoute = {
     Skeleton: '/directives/skeleton',
     IconsLucide: '/icons/lucide',
     IconsMaterial: '/icons/material',
+    IconsFontawesome: '/icons/fontawesome',
     InputInline: '/components/input-inline',
     Input: '/components/input',
     InputDate: '/components/input-date',

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

@@ -111,6 +111,13 @@ export const pages: TuiDocRoutePages = [
         keywords: 'icons, material, design, картинка, свг, svg, графика',
         route: DemoRoute.IconsMaterial,
     },
+    {
+        section: 'Icons',
+        title: 'Fontawesome',
+        keywords:
+            'icons, fontawesome, awesome, font, design, картинка, свг, svg, графика',
+        route: DemoRoute.IconsFontawesome,
+    },
     {
         section: 'Foundations',
         title: 'Styles',

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

@@ -0,0 +1,15 @@
+<tui-icon icon="@tui.fa.brands.google-play" />
+
+<img
+    alt=""
+    [src]="'@tui.fa.solid.camera-retro' | tuiIcon"
+/>
+
+<tui-icon
+    icon="@tui.fa.brands.skype"
+    [style.color]="'var(--tui-background-accent-1)'"
+/>
+
+<tui-icon icon="@tui.fa.regular.face-sad-cry" />
+
+<tui-icon icon="@tui.fa.solid.truck-medical" />

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

@@ -0,0 +1,8 @@
+:host {
+    display: flex;
+    gap: 0.625rem;
+}
+
+img {
+    width: 1.5rem;
+}

projects/demo/src/modules/icons/fontawesome/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/fontawesome/examples/assets.md

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

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

@@ -0,0 +1,46 @@
+<tui-doc-page
+    header="Fontawesome"
+    package="icons-fontawesome"
+    type="icons"
+>
+    <ng-template pageTab>
+        <h2 class="title">Fontawesome icons pack</h2>
+
+        <p>
+            Open source theme for Taiga UI uses processed
+            <a
+                href="https://fontawesome.com/"
+                rel="noreferrer"
+                target="_blank"
+                tuiLink
+            >
+                Fontawesome Icons (free pack).
+            </a>
+            You can browse all the icons from this pack and find the one that suits you
+            <a
+                href="https://fontawesome.com/search?m=free&o=r"
+                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-fontawesome" />
+
+        <tui-doc-code
+            filename="angular.json"
+            [code]="assets"
+        />
+    </ng-template>
+</tui-doc-page>

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

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class Page {
+    protected readonly assets = import('./examples/assets.md?raw');
+}

projects/icons-fontawesome/README.md

@@ -0,0 +1,26 @@
+# Taiga UI — Icons
+
+[![npm version](https://img.shields.io/npm/v/@taiga-ui/icons.svg)](https://npmjs.com/package/@taiga-ui/icons)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@taiga-ui/icons)](https://bundlephobia.com/result?p=@taiga-ui/icons)
+[![Discord](https://img.shields.io/discord/748677963142135818?color=7289DA&label=%23taiga-ui&logo=discord&logoColor=white)](https://discord.gg/Us8d8JVaTg)
+
+[Website](https://taiga-ui.dev) • [Documentation](https://taiga-ui.dev/getting-started) •
+[Core team](https://github.com/taiga-family/taiga-ui/#core-team)
+
+> A set of vector icons used by Taiga UI
+
+It's a part of [**Taiga UI**](https://github.com/taiga-family/taiga-ui) that is fully-treeshakable Angular UI Kit
+consisting of multiple base libraries and several add-ons
+
+## How to install
+
+```
+npm i @taiga-ui/icons
+```
+
+Don't forget that Taiga UI is fully-treeshakable. **You can import even just one entity from our library** and be sure
+that there is no redundant code in your bundle. Bundlphobia badge shows size of the whole library.
+
+## Docs
+
+See our [Documentation](https://taiga-ui.dev/getting-started)

projects/icons-fontawesome/index.ts

@@ -0,0 +1 @@
+export {};

projects/icons-fontawesome/ng-package.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "assets": [
+        "src"
+    ],
+    "allowedNonPeerDependencies": [
+        "."
+    ],
+    "dest": "../../dist/icons-fontawesome",
+    "lib": {
+        "entryFile": "./index.ts"
+    }
+}

projects/icons-fontawesome/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@taiga-ui/icons-fontawesome",
+    "version": "4.0.0",
+    "description": "Fontawesome icons for Taiga UI",
+    "keywords": [
+        "angular",
+        "icon",
+        "svg",
+        "fontawesome"
+    ],
+    "homepage": "https://github.com/taiga-family/taiga-ui",
+    "repository": "https://github.com/taiga-family/taiga-ui",
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "@fortawesome/fontawesome-free": "6.6.0"
+    }
+}

projects/icons-fontawesome/project.json

@@ -0,0 +1,47 @@
+{
+    "name": "icons-fontawesome",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "projects/{projectName}",
+    "projectType": "library",
+    "prefix": "tui",
+    "implicitDependencies": ["!testing"],
+    "targets": {
+        "build": {
+            "executor": "@angular-devkit/build-angular:ng-packagr",
+            "outputs": ["{workspaceRoot}/dist/{projectName}"],
+            "options": {
+                "tsConfig": "tsconfig.build.json",
+                "project": "{projectRoot}/ng-package.json"
+            }
+        },
+        "prebuild": {
+            "executor": "nx:run-commands",
+            "options": {
+                "parallel": false,
+                "commands": [
+                    "ts-node ./{projectRoot}/scripts/prepare-icons.ts",
+                    "prettier ./{projectRoot}/src/* --write"
+                ]
+            }
+        },
+        "prepublish": {
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "cp ./LICENSE ./dist/{projectName}"
+            }
+        },
+        "publish": {
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "ts-node ./scripts/publish.ts --path ./dist/{projectName} --dry-run {args.dry-run} --customVersion {args.customVersion} --customTag {args.customTag}"
+            },
+            "dependsOn": [
+                {
+                    "target": "prepublish",
+                    "params": "ignore",
+                    "dependencies": false
+                }
+            ]
+        }
+    }
+}