@primeicons/angular 8.0.0-alpha.4 → 8.0.0-alpha.5

package/README.md

@@ -0,0 +1,297 @@
+# @primeicons/angular
+
+PrimeIcons for Angular - 300+ customizable SVG icons as Angular standalone components.
+
+## Installation
+
+```bash
+npm install @primeicons/angular
+# or
+pnpm add @primeicons/angular
+# or
+yarn add @primeicons/angular
+```
+
+## Usage
+
+### Import Icons in Standalone Components
+
+```typescript
+import { Component } from '@angular/core';
+import { Search, Home, User, Cog } from '@primeicons/angular';
+
+@Component({
+    selector: 'app-root',
+    standalone: true,
+    imports: [Search, Home, User, Cog],
+    template: `
+        <svg data-p-icon="search"></svg>
+        <svg data-p-icon="home" [size]="32"></svg>
+        <svg data-p-icon="user" color="blue"></svg>
+        <svg data-p-icon="cog" size="2rem" color="#ff0000"></svg>
+    `
+})
+export class AppComponent {}
+```
+
+### Import Individual Icons (Tree-Shakeable)
+
+```typescript
+import { Component } from '@angular/core';
+import { Search } from '@primeicons/angular/search';
+import { Home } from '@primeicons/angular/home';
+
+@Component({
+    selector: 'app-root',
+    standalone: true,
+    imports: [Search, Home],
+    template: `
+        <svg data-p-icon="search" [size]="24"></svg>
+        <svg data-p-icon="home" [size]="24" color="green"></svg>
+    `
+})
+export class AppComponent {}
+```
+
+## Inputs
+
+All icon components accept the following inputs:
+
+| Input   | Type               | Default        | Description                  |
+| ------- | ------------------ | -------------- | ---------------------------- |
+| `size`  | `number \| string` | `24`           | Icon size (width and height) |
+| `color` | `string`           | `currentColor` | Icon color                   |
+
+## Examples
+
+### Basic Usage
+
+```typescript
+import { Component } from '@angular/core';
+import { Heart, Star, Bell } from '@primeicons/angular';
+
+@Component({
+    selector: 'app-icons',
+    standalone: true,
+    imports: [Heart, Star, Bell],
+    template: `
+        <svg data-p-icon="heart"></svg>
+        <svg data-p-icon="star" [size]="32"></svg>
+        <svg data-p-icon="bell" color="red"></svg>
+    `
+})
+export class IconsComponent {}
+```
+
+### With Signal Inputs
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { Search } from '@primeicons/angular';
+
+@Component({
+    selector: 'app-search',
+    standalone: true,
+    imports: [Search],
+    template: `
+        <svg data-p-icon="search" [size]="iconSize()" [color]="iconColor()"></svg>
+        <button (click)="toggleSize()">Toggle Size</button>
+    `
+})
+export class SearchComponent {
+    iconSize = signal(24);
+    iconColor = signal('#007bff');
+
+    toggleSize() {
+        this.iconSize.update((s) => (s === 24 ? 32 : 24));
+    }
+}
+```
+
+### Dynamic Icon Component
+
+For dynamic icon rendering, you can create a wrapper component:
+
+```typescript
+import { Component, input, ViewContainerRef, effect, inject, Type } from '@angular/core';
+import { CoreIcon } from '@primeicons/angular/core';
+import * as Icons from '@primeicons/angular';
+
+@Component({
+    selector: 'p-icon',
+    standalone: true,
+    template: ''
+})
+export class PIcon {
+    private vcr = inject(ViewContainerRef);
+
+    name = input.required<string>();
+    size = input<number | string>(24);
+    color = input<string | undefined>(undefined);
+
+    constructor() {
+        effect(() => {
+            this.vcr.clear();
+            const IconComponent = (Icons as Record<string, Type<CoreIcon>>)[this.toPascalCase(this.name())];
+            if (IconComponent) {
+                const ref = this.vcr.createComponent(IconComponent);
+                ref.setInput('size', this.size());
+                if (this.color()) {
+                    ref.setInput('color', this.color());
+                }
+            }
+        });
+    }
+
+    private toPascalCase(str: string): string {
+        return str
+            .split('-')
+            .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+            .join('');
+    }
+}
+```
+
+### With Button
+
+```typescript
+import { Component } from '@angular/core';
+import { Search, Plus, Trash } from '@primeicons/angular';
+
+@Component({
+    selector: 'app-buttons',
+    standalone: true,
+    imports: [Search, Plus, Trash],
+    template: `
+        <button><svg data-p-icon="search" [size]="16"></svg> Search</button>
+
+        <button><svg data-p-icon="plus" [size]="16"></svg> Add Item</button>
+
+        <button class="danger"><svg data-p-icon="trash" [size]="16" color="red"></svg> Delete</button>
+    `
+})
+export class ButtonsComponent {}
+```
+
+## TypeScript
+
+Full TypeScript support:
+
+```typescript
+import { Component } from '@angular/core';
+import { Search } from '@primeicons/angular';
+import type { IconProps } from '@primeicons/core';
+
+@Component({
+    selector: 'app-typed-icon',
+    standalone: true,
+    imports: [Search],
+    template: `<svg data-p-icon="search" [size]="config.size" [color]="config.color"></svg>`
+})
+export class TypedIconComponent {
+    config: IconProps = {
+        size: 24,
+        color: 'blue'
+    };
+}
+```
+
+## CSS Classes
+
+Each icon automatically includes these CSS classes:
+
+- `p-icon` - Base class for all icons
+- `p-icon-{name}` - Specific class for each icon (e.g., `p-icon-search`)
+
+```css
+/* Style all icons */
+:host ::ng-deep .p-icon {
+    transition: color 0.2s;
+}
+
+/* Style specific icon */
+:host ::ng-deep .p-icon-heart:hover {
+    color: red;
+}
+```
+
+Or using global styles:
+
+```css
+/* styles.css */
+.p-icon {
+    transition: color 0.2s;
+}
+
+.p-icon-heart:hover {
+    color: red;
+}
+```
+
+## Metadata & Icon Lookup
+
+Icon metadata is managed by the `@primeicons/metadata` package and re-exported here for convenience:
+
+```typescript
+import { ICON_MAP, ICON_MAP_BY_NAME, findIcons } from '@primeicons/metadata/angular';
+
+// Find icon by name (kebab-case)
+const iconData = ICON_MAP_BY_NAME['check'];
+const CheckIcon = iconData.component; // Already lazy-loaded component
+
+// Search and use
+const results = findIcons('arrow');
+results.forEach((icon) => {
+    const Component = icon.component;
+    // Use Component in imports: imports: [Component]
+});
+```
+
+Alternatively, import directly from the metadata package:
+
+```typescript
+import { ICON_MAP, findIcons } from '@primeicons/metadata/angular';
+```
+
+### Metadata API
+
+| Variable                | Type                                | Description                                  |
+| ----------------------- | ----------------------------------- | -------------------------------------------- |
+| `ICON_MAP`              | `IconMetadataEntry[]`               | All icons as array                           |
+| `ICON_MAP_BY_NAME`      | `Record<string, IconMetadataEntry>` | Indexed by kebab-case name                   |
+| `ICON_MAP_BY_COMPONENT` | `Record<string, IconMetadataEntry>` | Indexed by component name (with Icon suffix) |
+| `ICON_MAP_BY_CAMEL`     | `Record<string, IconMetadataEntry>` | Indexed by camelCase name                    |
+| `TOTAL_ICONS`           | `number`                            | Total icon count                             |
+| `PACKAGE_INFO`          | `object`                            | Package metadata                             |
+
+| Function              | Returns               | Description                            |
+| --------------------- | --------------------- | -------------------------------------- |
+| `getIconNames()`      | `string[]`            | All kebab-case icon names              |
+| `getComponentNames()` | `string[]`            | All component names (with Icon suffix) |
+| `findIcons(query)`    | `IconMetadataEntry[]` | Search icons by partial match          |
+
+### JSON Metadata
+
+Access the raw JSON metadata directly:
+
+```typescript
+import metadata from '@primeicons/metadata/angular.json';
+
+console.log(manifest.icons[0]); // { name: 'address-book', component: 'AddressBookIcon', ... }
+```
+
+## Icon List
+
+The library includes 300+ icons including:
+
+- Navigation: `ArrowLeft`, `ArrowRight`, `ChevronUp`, `ChevronDown`
+- Actions: `Search`, `Plus`, `Minus`, `Check`, `Times`
+- Objects: `Home`, `User`, `Cog`, `File`, `Folder`
+- Social: `Facebook`, `Twitter`, `Github`, `Linkedin`
+- And many more...
+
+View the complete list at [primeicons.org](https://primeicons.org).
+
+## License
+
+MIT - Copyright (c) PrimeTek Informatics

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primeicons/angular",
-  "version": "8.0.0-alpha.4",
+  "version": "8.0.0-alpha.5",
   "author": "PrimeTek Informatics",
   "homepage": "https://primeicons.org/",
   "description": "PrimeIcons for Angular - 300+ customizable SVG icons as Angular components",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@primeuix/utils": "^0.6.4",
     "tslib": "^2",
-    "@primeicons/core": "8.0.0-alpha.4"
+    "@primeicons/core": "8.0.0-alpha.5"
   },
   "peerDependencies": {
     "@angular/core": ">=21"