feat: add @taiga-ui/material-design-icons

.github/workflows/auto-update-icons.yml

@@ -16,10 +16,15 @@ jobs:
           rm -rf ./projects/icons/src/flags && mkdir -p ./projects/icons/src/flags
           cp -R ./node_modules/@taiga-ui/design-tokens/icons/flags/* ./projects/icons/src/flags
           npx prettier ./projects/icons/src/flags --write
+      - name: Material icons
+        run: |
+          npx nx prebuild material-design-icons
+          npx prettier ./projects/material-design-icons/src/* --write
+          npx nx build material-design-icons
       - run: |
           npx nx prebuild icons
-          npx nx build icons
           npx prettier ./projects/icons/src/* --write
+          npx nx build icons
           npx ts-node ./scripts/generate-used-icons.ts
           npx eslint ./projects/cdk/constants/used-icons.ts --fix || echo "no file matching"
           npx eslint ./projects/demo/used-icons.ts --fix || echo "no file matching"

projects/demo/project.json

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

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

@@ -194,6 +194,11 @@ export const ROUTES: Routes = [
         loadComponent: async () => import('../components/icons'),
         title: 'Icons',
     }),
+    route({
+        path: DemoRoute.IconsMaterial,
+        loadComponent: async () => import('../components/icons-material'),
+        title: 'Icons-material',
+    }),
     route({
         path: DemoRoute.Label,
         title: 'Label ',

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

@@ -66,7 +66,8 @@ export const DemoRoute = {
     Fade: '/directives/fade',
     Sensitive: '/directives/sensitive',
     Skeleton: '/directives/skeleton',
-    Icons: '/icons',
+    Icons: '/icons/overview',
+    IconsMaterial: '/icons/material',
     InputInline: '/components/input-inline',
     Input: '/components/input',
     InputDate: '/components/input-date',

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

@@ -101,9 +101,21 @@ export const pages: TuiDocRoutePages = [
     {
         section: 'Foundations',
         title: 'Icons',
-        keywords:
-            'icons, icon, free, pack, lucide, markup, icons, image, картинка, свг, svg, графика',
-        route: DemoRoute.Icons,
+        subPages: [
+            {
+                section: 'Foundations',
+                title: 'Overview',
+                keywords:
+                    'icons, icon, free, pack, lucide, markup, icons, image, картинка, свг, svg, графика',
+                route: DemoRoute.Icons,
+            },
+            {
+                section: 'Foundations',
+                title: 'Material design icons',
+                keywords: 'icons, material, design',
+                route: DemoRoute.IconsMaterial,
+            },
+        ],
     },
     {
         section: 'Foundations',

projects/demo/src/modules/components/icons-material/examples/1/index.html

@@ -0,0 +1,9 @@
+<tui-icon
+    icon="@tui.material.round.brightness_medium"
+    [style.color]="'var(--tui-background-accent-1)'"
+/>
+
+<img
+    alt=""
+    [src]="'@tui.material.outlined.settings' | tuiIcon"
+/>

projects/demo/src/modules/components/icons-material/examples/1/index.less

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

projects/demo/src/modules/components/icons-material/examples/1/index.ts

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiIcon, TuiIconPipe, tuiIconResolverProvider} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    imports: [TuiIcon, TuiIconPipe],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+    providers: [
+        tuiIconResolverProvider(
+            (name) =>
+                `assets/taiga-ui/material-icons${name.replace('@tui.material', '').split('.').join('/')}.svg`,
+        ),
+    ],
+})
+export default class Example {}

projects/demo/src/modules/components/icons-material/examples/assets.md

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

projects/demo/src/modules/components/icons-material/index.html

@@ -0,0 +1,40 @@
+<tui-doc-page
+    header="Icons material"
+    package="material-design-icons"
+    type="components"
+>
+    <p>
+        Latest optimized SVGs
+        <a
+            href="https://marella.me/material-design-icons/demo/font/"
+            tuiLink
+        >
+            material icons
+        </a>
+        for your Material Design.
+    </p>
+
+    <tui-accordion>
+        <tui-accordion-item [open]="false">
+            Getting started
+
+            <ng-template tuiAccordionItemContent>
+                <tui-doc-code code="npm i @taiga-ui/material-design-icons" />
+
+                <tui-doc-code
+                    filename="angular.json"
+                    [code]="assets"
+                />
+            </ng-template>
+        </tui-accordion-item>
+    </tui-accordion>
+
+    <ng-template pageTab>
+        <tui-doc-example
+            id="basic"
+            heading="Basic"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
+        />
+    </ng-template>
+</tui-doc-page>

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

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

projects/demo/used-icons.ts

@@ -57,6 +57,7 @@ export const TUI_USED_ICONS = [
     '@tui.electron-mono',
     '@tui.maestro-mono',
     '@tui.mir-mono',
+    '@tui.material',
     '@tui.dollar-sign',
     '@tui.paint-bucket',
     '@tui.file',

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

@@ -1,5 +1,5 @@
-const path = require('node:path');
-const fs = require('node:fs');
+import fs from 'node:fs';
+import path from 'node:path';
 
 (function main(): void {
     const src = path.join(process.cwd(), 'node_modules', 'lucide-static', 'icons');

projects/material-design-icons/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/material-design-icons/index.ts

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

projects/material-design-icons/ng-package.json

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

projects/material-design-icons/package.json

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

projects/material-design-icons/project.json

@@ -0,0 +1,43 @@
+{
+    "name": "material-design-icons",
+    "$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": {
+                "command": "ts-node ./{projectRoot}/scripts/prepare-icons.ts"
+            }
+        },
+        "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
+                }
+            ]
+        }
+    }
+}

projects/material-design-icons/scripts/prepare-icons.ts

@@ -0,0 +1,34 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+(function main(): void {
+    const dest =
+        process.argv[2] ||
+        path.join(process.cwd(), 'projects', 'material-design-icons', 'src');
+    const types = ['filled', 'outlined', 'round', 'sharp', 'two-tone'];
+
+    types.forEach((type) => {
+        const src = path.join(
+            process.cwd(),
+            'node_modules',
+            '@material-design-icons',
+            'svg',
+            type,
+        );
+
+        fs.readdirSync(src).forEach((filename: string) => {
+            const content = fs
+                .readFileSync(path.join(src, filename), 'utf-8')
+                .replace(/class="[a-zA-Z0-9:;.\s()\-,]*"/, '')
+                .replaceAll(
+                    /<(circle|ellipse|line|polygon|polyline|path|rect)/g,
+                    '<$1 vector-effect="non-scaling-stroke"',
+                );
+
+            const filePath = path.join(dest, type, filename);
+
+            fs.mkdirSync(path.dirname(filePath), {recursive: true});
+            fs.writeFileSync(filePath, content);
+        });
+    });
+})();