@mal-icons/angular 0.1.0

package/README.md

@@ -0,0 +1,108 @@
+# @mal-icons/angular
+
+[![npm](https://img.shields.io/npm/v/@mal-icons/angular.svg)](https://www.npmjs.com/package/@mal-icons/angular)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/mal-icons/mal-icons/blob/main/LICENSE)
+
+Angular adapter for [**mal-icons**](https://github.com/mal-icons/mal-icons) — a
+high-performance, tree-shakeable icon SDK. Each icon is a pre-generated
+**standalone** Angular component that renders SVG through `Renderer2` with
+`OnPush` change detection.
+
+## Highlights
+
+- **Standalone components** — import an icon directly, no `NgModule` needed.
+- **`OnPush`** — minimal change-detection overhead.
+- **Tree-shakeable** — every icon is its own component.
+- **Themeable** — dependency-injection context (`ICON_CONTEXT`) with per-icon overrides.
+- **Accessible** — correct `role` / `aria-hidden` and optional `<title>`.
+
+## Installation
+
+```bash
+bun add @mal-icons/angular
+# or
+npm install @mal-icons/angular
+```
+
+> Requires `@angular/core` 16 or newer (peer dependency). The package ships
+> TypeScript source, so it compiles in your app's Angular version.
+
+## Quick start
+
+Import the standalone component and use its selector in a template:
+
+```ts
+import { Component } from "@angular/core";
+import { FiActivity } from "@mal-icons/angular/fi";
+
+@Component({
+  standalone: true,
+  selector: "app-status",
+  imports: [FiActivity],
+  template: `<mal-fi-activity [size]="24" title="Status" />`,
+})
+export class StatusComponent {}
+```
+
+> The selector is the kebab-cased icon name prefixed with `mal-`
+> (e.g. `FiActivity` → `<mal-fi-activity>`).
+
+### App-wide theming
+
+Provide `ICON_CONTEXT` to set defaults for all descendant icons; per-icon
+inputs override them:
+
+```ts
+import { ICON_CONTEXT } from "@mal-icons/angular";
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    { provide: ICON_CONTEXT, useValue: { size: 20, color: "#3366ff" } },
+  ],
+});
+```
+
+## Inputs
+
+| Input       | Type               | Description                          |
+| ----------- | ------------------ | ------------------------------------ |
+| `size`      | `number \| string` | Width and height (defaults to `1em`) |
+| `color`     | `string`           | Overrides `currentColor`             |
+| `title`     | `string`           | Accessible label                     |
+| `className` | `string`           | Additional class names               |
+
+## API
+
+```ts
+import {
+  IconBaseComponent,
+  ICON_CONTEXT,
+  DefaultIconContext,
+  ICON_ANIMATIONS_CSS,
+  WEIGHT_STROKE_WIDTH,
+  animationClass,
+} from "@mal-icons/angular";
+```
+
+## Subpath exports
+
+| Import                             | Contents                    |
+| ---------------------------------- | --------------------------- |
+| `@mal-icons/angular`               | Base component and context  |
+| `@mal-icons/angular/fi`            | All Feather icon components |
+| `@mal-icons/angular/fi/FiActivity` | A single icon component     |
+
+## Example
+
+A Vite + Angular 22 gallery (standalone components, signals,
+`NgComponentOutlet`) lives in
+[`examples/angular`](https://github.com/mal-icons/mal-icons/tree/main/examples/angular).
+
+## Repository
+
+<https://github.com/mal-icons/mal-icons> · package directory
+[`packages/angular`](https://github.com/mal-icons/mal-icons/tree/main/packages/angular).
+
+## License
+
+[MIT](https://github.com/mal-icons/mal-icons/blob/main/LICENSE) © MALDevs

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@mal-icons/angular",
+  "version": "0.1.0",
+  "description": "Angular standalone components for mal-icons.",
+  "type": "module",
+  "license": "MIT",
+  "author": "MALDevs",
+  "homepage": "https://github.com/mal-icons/mal-icons#readme",
+  "bugs": {
+    "url": "https://github.com/mal-icons/mal-icons/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mal-icons/mal-icons.git",
+    "directory": "packages/angular"
+  },
+  "keywords": ["icons", "svg", "angular", "components", "mal-icons"],
+  "sideEffects": false,
+  "files": ["src"],
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "bun": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./fi": {
+      "bun": "./src/icons/fi/index.ts",
+      "import": "./src/icons/fi/index.ts"
+    },
+    "./fi/*": {
+      "bun": "./src/icons/fi/*.ts",
+      "import": "./src/icons/fi/*.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=16"
+  },
+  "dependencies": {
+    "@mal-icons/core": "workspace:*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/context.ts

@@ -0,0 +1,17 @@
+import { InjectionToken } from "@angular/core";
+import type { IconContextValue } from "@mal-icons/core";
+
+/** Theming context value for all mal-icons Angular components. */
+export type AngularIconContextValue = IconContextValue<Record<string, string>>;
+
+/** Default (empty) theming configuration. */
+export const DefaultIconContext: AngularIconContextValue = {};
+
+/**
+ * Injection token carrying icon theming (size, color, className, attr).
+ * Provide it in a component/module to theme all descendant mal-icons
+ * components; consumed inside {@link IconBaseComponent}.
+ */
+export const ICON_CONTEXT = new InjectionToken<AngularIconContextValue>("mal-icons-context", {
+  factory: () => DefaultIconContext,
+});

package/src/icon-base.ts

@@ -0,0 +1,91 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  type OnChanges,
+  Renderer2,
+  inject,
+} from "@angular/core";
+import { type NodeTuple, resolveIconAttrs } from "@mal-icons/core";
+import { type AngularIconContextValue, ICON_CONTEXT } from "./context.ts";
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+/**
+ * The shared SVG wrapper. Reads theming from the injected {@link ICON_CONTEXT},
+ * applies the SRS override priority, and builds a native `<svg>` element with
+ * `Renderer2` — no `innerHTML`, no runtime string parsing.
+ */
+@Component({
+  selector: "mal-icons",
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: "",
+})
+export class IconBaseComponent implements OnChanges {
+  @Input() viewBox = "0 0 24 24";
+  @Input() nodes: NodeTuple[] = [];
+  @Input() defaultAttr: Record<string, unknown> = {};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+
+  private svg?: SVGSVGElement;
+
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly renderer = inject(Renderer2);
+  private readonly ctx = inject<AngularIconContextValue>(ICON_CONTEXT);
+
+  ngOnChanges(): void {
+    this.build();
+  }
+
+  private build(): void {
+    if (this.svg) {
+      this.renderer.removeChild(this.host.nativeElement, this.svg);
+      this.svg = undefined;
+    }
+
+    const { size, color, className } = resolveIconAttrs(
+      { size: this.size, color: this.color, className: this.className },
+      this.ctx,
+    );
+
+    const svg = this.renderer.createElement("svg", SVG_NS) as SVGSVGElement;
+    this.renderer.setAttribute(svg, "viewBox", this.viewBox);
+    this.renderer.setAttribute(svg, "stroke", "currentColor");
+    this.renderer.setAttribute(svg, "fill", "currentColor");
+    this.renderer.setAttribute(svg, "stroke-width", "0");
+    for (const [k, v] of Object.entries(this.defaultAttr)) {
+      this.renderer.setAttribute(svg, k, String(v));
+    }
+    for (const [k, v] of Object.entries(this.ctx.attr ?? {})) {
+      this.renderer.setAttribute(svg, k, String(v));
+    }
+    this.renderer.setAttribute(svg, "width", String(size));
+    this.renderer.setAttribute(svg, "height", String(size));
+    if (color) this.renderer.setStyle(svg, "color", color);
+    if (className) this.renderer.setAttribute(svg, "class", className);
+
+    if (this.title) {
+      this.renderer.setAttribute(svg, "role", "img");
+      const title = this.renderer.createElement("title", SVG_NS);
+      this.renderer.appendChild(title, this.renderer.createText(this.title));
+      this.renderer.appendChild(svg, title);
+    } else {
+      this.renderer.setAttribute(svg, "role", "presentation");
+      this.renderer.setAttribute(svg, "aria-hidden", "true");
+    }
+
+    for (const [tag, attr] of this.nodes) {
+      const el = this.renderer.createElement(tag, SVG_NS);
+      for (const [k, v] of Object.entries(attr)) this.renderer.setAttribute(el, k, String(v));
+      this.renderer.appendChild(svg, el);
+    }
+
+    this.renderer.appendChild(this.host.nativeElement, svg);
+    this.svg = svg;
+  }
+}

package/src/icons/fi/FiActivity.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-activity",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiActivity {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["polyline",{"points":"22 12 18 12 15 21 9 3 6 12 2 12"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiAirplay.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-airplay",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiAirplay {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["path",{"d":"M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"}],["polygon",{"points":"12 15 17 21 7 21 12 15"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiAlertCircle.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-alert-circle",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiAlertCircle {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"12","y1":"8","x2":"12","y2":"12"}],["line",{"x1":"12","y1":"16","x2":"12.01","y2":"16"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiAlertOctagon.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-alert-octagon",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiAlertOctagon {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["polygon",{"points":"7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"}],["line",{"x1":"12","y1":"8","x2":"12","y2":"12"}],["line",{"x1":"12","y1":"16","x2":"12.01","y2":"16"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiAlertTriangle.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-alert-triangle",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiAlertTriangle {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["path",{"d":"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"}],["line",{"x1":"12","y1":"9","x2":"12","y2":"13"}],["line",{"x1":"12","y1":"17","x2":"12.01","y2":"17"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiAlignCenter.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-align-center",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiAlignCenter {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["line",{"x1":"18","y1":"10","x2":"6","y2":"10"}],["line",{"x1":"21","y1":"6","x2":"3","y2":"6"}],["line",{"x1":"21","y1":"14","x2":"3","y2":"14"}],["line",{"x1":"18","y1":"18","x2":"6","y2":"18"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiAlignJustify.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-align-justify",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiAlignJustify {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["line",{"x1":"21","y1":"10","x2":"3","y2":"10"}],["line",{"x1":"21","y1":"6","x2":"3","y2":"6"}],["line",{"x1":"21","y1":"14","x2":"3","y2":"14"}],["line",{"x1":"21","y1":"18","x2":"3","y2":"18"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiAlignLeft.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-align-left",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiAlignLeft {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["line",{"x1":"17","y1":"10","x2":"3","y2":"10"}],["line",{"x1":"21","y1":"6","x2":"3","y2":"6"}],["line",{"x1":"21","y1":"14","x2":"3","y2":"14"}],["line",{"x1":"17","y1":"18","x2":"3","y2":"18"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiAlignRight.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-align-right",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiAlignRight {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["line",{"x1":"21","y1":"10","x2":"7","y2":"10"}],["line",{"x1":"21","y1":"6","x2":"3","y2":"6"}],["line",{"x1":"21","y1":"14","x2":"3","y2":"14"}],["line",{"x1":"21","y1":"18","x2":"7","y2":"18"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiAnchor.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-anchor",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiAnchor {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["circle",{"cx":"12","cy":"5","r":"3"}],["line",{"x1":"12","y1":"22","x2":"12","y2":"8"}],["path",{"d":"M5 12H2a10 10 0 0 0 20 0h-3"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiAperture.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-aperture",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiAperture {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"14.31","y1":"8","x2":"20.05","y2":"17.94"}],["line",{"x1":"9.69","y1":"8","x2":"21.17","y2":"8"}],["line",{"x1":"7.38","y1":"12","x2":"13.12","y2":"2.06"}],["line",{"x1":"9.69","y1":"16","x2":"3.95","y2":"6.06"}],["line",{"x1":"14.31","y1":"16","x2":"2.83","y2":"16"}],["line",{"x1":"16.62","y1":"12","x2":"10.88","y2":"21.94"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiArchive.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-archive",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiArchive {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["polyline",{"points":"21 8 21 21 3 21 3 8"}],["rect",{"x":"1","y":"3","width":"22","height":"5"}],["line",{"x1":"10","y1":"12","x2":"14","y2":"12"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiArrowDown.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-arrow-down",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiArrowDown {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["line",{"x1":"12","y1":"5","x2":"12","y2":"19"}],["polyline",{"points":"19 12 12 19 5 12"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiArrowDownCircle.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-arrow-down-circle",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiArrowDownCircle {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["circle",{"cx":"12","cy":"12","r":"10"}],["polyline",{"points":"8 12 12 16 16 12"}],["line",{"x1":"12","y1":"8","x2":"12","y2":"16"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiArrowDownLeft.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-arrow-down-left",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiArrowDownLeft {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["line",{"x1":"17","y1":"7","x2":"7","y2":"17"}],["polyline",{"points":"17 17 7 17 7 7"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiArrowDownRight.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-arrow-down-right",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiArrowDownRight {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["line",{"x1":"7","y1":"7","x2":"17","y2":"17"}],["polyline",{"points":"17 7 17 17 7 17"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}

package/src/icons/fi/FiArrowLeft.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import type { NodeTuple } from "@mal-icons/core";
+import { IconBaseComponent } from "../../icon-base.ts";
+
+@Component({
+  selector: "mal-fi-arrow-left",
+  standalone: true,
+  imports: [IconBaseComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<mal-icons [viewBox]="viewBox" [nodes]="nodes" [defaultAttr]="defaultAttr" [size]="size" [color]="color" [title]="title" [className]="className"></mal-icons>`,
+})
+export class FiArrowLeft {
+  readonly viewBox = "0 0 24 24";
+  readonly nodes: NodeTuple[] = [["line",{"x1":"19","y1":"12","x2":"5","y2":"12"}],["polyline",{"points":"12 19 5 12 12 5"}]];
+  readonly defaultAttr = {"fill":"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};
+  @Input() size?: string | number;
+  @Input() color?: string;
+  @Input() title?: string;
+  @Input() className?: string;
+}