@hugeicons/angular 1.0.2 → 1.0.5

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# @hugeicons/angular
+
+
+## 1.0.5
+
+### Patch Changes
+
+- Added "How It Works" section explaining the rendering library concept
+- Standardized documentation structure across all framework packages
+- Updated icon counts to 4,600+ free / 46,000+ pro
+- Updated docs URL to hugeicons.com/docs
+- Updated to use single image source from React repository
+
+
+## 1.0.0
+
+### Major Changes
+
+- Initial release
+- Standalone component support
+- Signal-based inputs for Angular 17.1+
+- Full TypeScript support

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Hugeicons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/PRO-LICENSE.md

@@ -0,0 +1,14 @@
+# Hugeicons Pro License
+
+**Full license:** https://hugeicons.com/license-agreement
+
+## Summary
+
+Pro icon packs (`@hugeicons-pro/*`) require a valid Hugeicons Pro license.
+
+* One seat per user who directly uses and accesses icons
+* Cannot redistribute source files (License Key, SVG, fonts, Figma files, etc.—see the license for details)
+* Cannot create competing icon products
+* See more in the license page
+
+For complete terms, seats, refunds, and legal details, see the full license above.

package/README.md

@@ -1,25 +1,36 @@
-![31c9262e-aeea-4403-9086-3c8b88885cab](https://github.com/hugeicons/hugeicons-react/assets/130147052/ff91f2f0-095a-4c6d-8942-3af4759f9021)
+![Hugeicons Logo](https://raw.githubusercontent.com/hugeicons/react/main/assets/logo.png)
 
 # @hugeicons/angular
 
-> HugeIcons Pro Angular Component Library - Beautiful and customizable icons for your Angular applications
+> Hugeicons Angular rendering library for fast, customizable icons with TypeScript and tree-shaking support
 
-## What is HugeIcons?
+## What is Hugeicons?
 
-HugeIcons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,000+ carefully crafted icons in the Stroke Rounded style, while the pro version offers over 36,000 icons across 9 unique styles.
+Hugeicons is a large icon set for modern web and mobile apps. The free package includes 4,600+ Stroke Rounded icons. The Pro package provides 46,000+ icons across 10 styles.
+
+## How It Works
+
+This package (`@hugeicons/angular`) is a **rendering library** - it provides the `HugeiconsIconComponent` that displays icons in your Angular app. The icons themselves come from separate icon packages:
+
+- **Free icons**: `@hugeicons/core-free-icons` (4,600+ icons)
+- **Pro icons**: `@hugeicons-pro/core-*` packages (46,000+ icons, requires license)
 
 ### Key Highlights
-- **4,000+ Free Icons**: Extensive collection of Stroke Rounded icons covering essential UI elements, actions, and concepts
-- **Pixel Perfect**: Every icon is crafted on a 24x24 pixel grid ensuring crisp, clear display at any size
+- **4,600+ Free Icons**: Stroke Rounded set for unlimited personal and commercial projects
+- **46,000+ Pro Icons, 10 Styles**: Stroke, Solid, Bulk, Duotone, and Twotone families for sharp, rounded, and standard needs with richer variants
+- **Pixel Perfect Grid**: Built on a 24x24 grid for crisp rendering at any size
 - **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
+- **Tree Shaking Ready**: Named exports keep bundles lean in modern bundlers
 - **Regular Updates**: New icons added regularly to keep up with evolving design trends
 
-> 📚 **Looking for Pro Icons?** Check out our comprehensive documentation at [docs.hugeicons.com](https://docs.hugeicons.com) for detailed information about pro icons, styles, and advanced usage.
 
-![a40aa766-1b04-4a2a-a2e6-0ec3c492b96a](https://github.com/hugeicons/hugeicons-react/assets/130147052/f82c0e0e-60ae-4617-802f-812cdc7a58da)
+> **Looking for Pro Icons?** Check out our docs at [hugeicons.com/docs](https://hugeicons.com/docs) for detailed information about pro icons, styles, and advanced usage.
+
+![Hugeicons Icons](https://raw.githubusercontent.com/hugeicons/react/main/assets/icons.png)
 
 ## Table of Contents
-- [What is HugeIcons?](#what-is-hugeicons)
+- [What is Hugeicons?](#what-is-hugeicons)
+- [How It Works](#how-it-works)
 - [Features](#features)
 - [Installation](#installation)
 - [Usage](#usage)
@@ -27,7 +38,7 @@ HugeIcons is a comprehensive icon library designed for modern web and mobile app
 - [Examples](#examples)
   - [Basic Usage](#basic-usage)
   - [Custom Size and Color](#custom-size-and-color)
-  - [Interactive Examples](#interactive-examples)
+  - [More examples and patterns](#more-examples-and-patterns)
 - [Performance](#performance)
 - [Troubleshooting](#troubleshooting)
 - [Browser Support](#browser-support)
@@ -38,12 +49,12 @@ HugeIcons is a comprehensive icon library designed for modern web and mobile app
 
 ## Features
 
-- 🎨 Customizable colors and sizes
-- 💪 TypeScript support with full type definitions
-- 🎯 Tree-shakeable for optimal bundle size
-- 📦 Multiple bundle formats (ESM, CJS, UMD)
-- ⚡ Lightweight and optimized
-- 🔄 Alternate icon support for dynamic interactions
+- Customizable colors, sizes, and stroke width
+- TypeScript support with full type definitions
+- Tree shakeable for optimal bundle size
+- Standalone component (Angular 17.1+)
+- Signal-based inputs for optimal performance
+- Alternate icon support for dynamic interactions
 
 ## Installation
 
@@ -63,173 +74,114 @@ bun add @hugeicons/angular @hugeicons/core-free-icons
 
 ## Usage
 
-First, import the HugeiconsModule in your app.module.ts:
-
-```typescript
-import { NgModule } from '@angular/core';
-import { HugeiconsModule } from '@hugeicons/angular';
-
-@NgModule({
-  imports: [
-    HugeiconsModule
-  ],
-  // ...
-})
-export class AppModule { }
-```
-
-Then use it in your component:
+The `HugeiconsIconComponent` is a standalone component. Import it directly in your component:
 
 ```typescript
-// your.component.ts
 import { Component } from '@angular/core';
+import { HugeiconsIconComponent } from '@hugeicons/angular';
 import { SearchIcon } from '@hugeicons/core-free-icons';
 
 @Component({
-  selector: 'app-your-component',
+  selector: 'app-example',
+  standalone: true,
+  imports: [HugeiconsIconComponent],
   template: `
     <hugeicons-icon
-      [icon]="icon"
+      [icon]="SearchIcon"
       [size]="24"
       color="currentColor"
       [strokeWidth]="1.5"
-    ></hugeicons-icon>
+    />
   `
 })
-export class YourComponent {
-  icon = SearchIcon;
+export class ExampleComponent {
+  SearchIcon = SearchIcon;
 }
 ```
 
+### NgModule Usage (Legacy)
+
+If you're using NgModules, import the component in your module:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { HugeiconsIconComponent } from '@hugeicons/angular';
+
+@NgModule({
+  imports: [HugeiconsIconComponent],
+  // ...
+})
+export class AppModule { }
+```
+
 ## Inputs
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
-| `icon` | `[string, Record<string, any>][]` | Required | The main icon to display (array of SVG elements and their attributes) |
-| `size` | `number \| string` | `24` | Icon size in pixels. Must be a positive number. String values will be parsed to numbers |
-| `strokeWidth` | `number \| undefined` | `undefined` | Width of the icon strokes (works with stroke-style icons) |
-| `altIcon` | `[string, Record<string, any>][]` | `undefined` | Alternative icon that can be used for states, interactions, or animations |
+| `icon` | `IconSvgObject` | Required | The main icon to display |
+| `altIcon` | `IconSvgObject` | - | Alternative icon for states, interactions, or dynamic icon swapping |
 | `showAlt` | `boolean` | `false` | When true, displays the altIcon instead of the main icon |
+| `size` | `number \| string` | `24` | Icon size in pixels |
 | `color` | `string` | `currentColor` | Icon color (CSS color value) |
-
-Note: 
-- The component accepts all standard SVG attributes which will be passed to the root SVG element.
-- The `size` input accepts both numbers and strings, but strings will be parsed to numbers and must result in a positive number.
-- Icon arrays are tuples of `[elementName: string, attributes: Record<string, any>][]` representing SVG elements.
+| `strokeWidth` | `number` | - | Width of the icon strokes |
+| `absoluteStrokeWidth` | `boolean` | `false` | When true, the stroke width will be scaled relative to the icon size |
+| `class` | `string` | - | CSS classes to apply to the icon |
 
 ## Examples
 
 ### Basic Usage
 ```typescript
-// basic.component.ts
 import { Component } from '@angular/core';
-import { SearchIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIconComponent } from '@hugeicons/angular';
+import { Video01Icon } from '@hugeicons/core-free-icons';
 
 @Component({
   selector: 'app-basic',
+  standalone: true,
+  imports: [HugeiconsIconComponent],
   template: `
-    <hugeicons-icon [icon]="icon"></hugeicons-icon>
+    <hugeicons-icon [icon]="Video01Icon" />
   `
 })
 export class BasicComponent {
-  icon = SearchIcon;
+  Video01Icon = Video01Icon;
 }
 ```
 
 ### Custom Size and Color
 ```typescript
-// custom.component.ts
 import { Component } from '@angular/core';
-import { NotificationIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIconComponent } from '@hugeicons/angular';
+import { Notification02Icon } from '@hugeicons/core-free-icons';
 
 @Component({
   selector: 'app-custom',
+  standalone: true,
+  imports: [HugeiconsIconComponent],
   template: `
     <hugeicons-icon
-      [icon]="icon"
+      [icon]="Notification02Icon"
       [size]="32"
       color="#FF5733"
-    ></hugeicons-icon>
+    />
   `
 })
 export class CustomComponent {
-  icon = NotificationIcon;
-}
-```
-
-### Interactive Examples
-
-#### Search Bar with Clear Button
-```typescript
-// search.component.ts
-import { Component } from '@angular/core';
-import { SearchIcon, CloseCircleIcon } from '@hugeicons/core-free-icons';
-
-@Component({
-  selector: 'app-search',
-  template: `
-    <div>
-      <input
-        [(ngModel)]="searchValue"
-        type="text"
-        placeholder="Search..."
-      />
-      <hugeicons-icon
-        [icon]="SearchIcon"
-        [altIcon]="CloseCircleIcon"
-        [showAlt]="searchValue.length > 0"
-        (click)="clearSearch()"
-      ></hugeicons-icon>
-    </div>
-  `
-})
-export class SearchComponent {
-  searchValue = '';
-  SearchIcon = SearchIcon;
-  CloseCircleIcon = CloseCircleIcon;
-
-  clearSearch(): void {
-    if (this.searchValue.length > 0) {
-      this.searchValue = '';
-    }
-  }
+  Notification02Icon = Notification02Icon;
 }
 ```
 
-#### Theme Toggle
-```typescript
-// theme-toggle.component.ts
-import { Component } from '@angular/core';
-import { SunIcon, MoonIcon } from '@hugeicons/core-free-icons';
+### More examples and patterns
 
-@Component({
-  selector: 'app-theme-toggle',
-  template: `
-    <button (click)="toggleTheme()">
-      <hugeicons-icon
-        [icon]="SunIcon"
-        [altIcon]="MoonIcon"
-        [showAlt]="isDark"
-      ></hugeicons-icon>
-    </button>
-  `
-})
-export class ThemeToggleComponent {
-  isDark = false;
-  SunIcon = SunIcon;
-  MoonIcon = MoonIcon;
-
-  toggleTheme(): void {
-    this.isDark = !this.isDark;
-  }
-}
-```
+- Examples: https://hugeicons.com/docs/integrations/angular/examples
+- Best practices: https://hugeicons.com/docs/integrations/angular/best-practices
 
 ## Performance
 
 - **Tree-shaking**: The package is fully tree-shakeable, ensuring only the icons you use are included in your final bundle
 - **Optimized SVGs**: All icons are optimized for size and performance
 - **Code Splitting**: Icons can be easily code-split when using dynamic imports
+- **OnPush Change Detection**: Uses ChangeDetectionStrategy.OnPush for optimal performance
 
 ## Troubleshooting
 
@@ -237,12 +189,12 @@ export class ThemeToggleComponent {
 
 1. **Icons not showing up?**
    - Make sure you've installed both `@hugeicons/angular` and `@hugeicons/core-free-icons`
-   - Check that the HugeiconsModule is properly imported in your module
+   - Check that `HugeiconsIconComponent` is imported in your component or module
    - Verify that icon names are correctly imported
 
 2. **TypeScript errors?**
    - Ensure your `tsconfig.json` includes the necessary type definitions
-   - Check that you're using the latest version of the package
+   - Check that you're using Angular 17.1+ for signal inputs support
 
 3. **Bundle size concerns?**
    - Use named imports instead of importing the entire icon set
@@ -261,8 +213,8 @@ The library supports all modern browsers.
 
 ## Pro Version
 
-> 🌟 **Want access to 36,000+ icons and 9 unique styles?** 
-> Check out our [Pro Version](https://hugeicons.com/pricing) and visit [docs.hugeicons.com](https://docs.hugeicons.com) for comprehensive documentation.
+> **Want access to 46,000+ icons and 10 unique styles?**
+> Check out our [Pro Version](https://hugeicons.com/pricing) and visit our [docs](https://hugeicons.com/docs) for detailed documentation.
 
 ### Available Pro Styles
 - **Stroke Styles**
@@ -276,13 +228,22 @@ The library supports all modern browsers.
 - **Special Styles**
   - Bulk Rounded (`@hugeicons-pro/core-bulk-rounded`)
   - Duotone Rounded (`@hugeicons-pro/core-duotone-rounded`)
+  - Duotone Standard (`@hugeicons-pro/core-duotone-standard`)
   - Twotone Rounded (`@hugeicons-pro/core-twotone-rounded`)
 
 ## License
 
-This project is licensed under the [MIT License](LICENSE.md).
+The code in this package (`@hugeicons/angular`) is licensed under the MIT License.
+
+This package only provides rendering utilities. It does not include or grant any rights to Hugeicons icon assets. Using Pro icon styles requires a valid Hugeicons Pro license.
+
+Hugeicons icon packs are licensed separately:
+- **Free icon packs**: use the license included with the specific free icon package you install.
+- **Pro icon packs (`@hugeicons-pro/*`)**: require a paid Hugeicons Pro license and are governed by the Hugeicons Pro Terms (see [Pro License](PRO-LICENSE.md).).
+
 
 ## Related
 
+- [Changelog](CHANGELOG.md) - Version history and release notes
 - [@hugeicons/core-free-icons](https://www.npmjs.com/package/@hugeicons/core-free-icons) - Free icon package
-- [HugeIcons Website](https://hugeicons.com) - Browse all available icons 
+- [Hugeicons Website](https://hugeicons.com) - Browse all available icons