ng-ui-icon

A lightweight, scalable, and customizable SVG Icon library for Angular applications.

✨ Features

• 🎨 100+ SVG Icons included out of the box.
• ⚡ Attribute Directive Syntax: Use directly on <i> or <span> tags (<i ngIcon="calendar"></i>).
• 🎯 Standalone Component & Module support.
• 📏 Built-in & Custom Sizes: Built-in presets (sm, md, lg) or any custom size (size="35px", size="48", size="2.5rem").
• 🌈 Color Support: Predefined semantic colors (primary, success, danger, etc.) or any custom hex color (#8b5cf6).

📦 Installation

npm install ng-ui-icon

🔨 Quick Start

1. Import in your Module or Standalone Component

Module-based app (app.module.ts):

import { NgUIIconModule } from 'ng-ui-icon';

@NgModule({
  imports: [NgUIIconModule]
})
export class AppModule {}

Standalone Component:

import { NgUIIconComponent } from 'ng-ui-icon';

@Component({
  standalone: true,
  imports: [NgUIIconComponent],
  // ...
})
export class MyComponent {}

💡 Usage

<!-- Basic Usage -->
<i ngIcon="calendar"></i>

<!-- With Built-in Presets -->
<i ngIcon="calendar" size="lg"></i>

<!-- With Custom Sizes (px, rem, etc.) -->
<i ngIcon="calendar" size="35px"></i>
<i ngIcon="calendar" size="48"></i> <!-- Auto converts to 48px -->

<!-- With Semantic Color -->
<i ngIcon="calendar" size="lg" color="primary"></i>

<!-- With Custom Hex Color -->
<i ngIcon="calendar" color="#8b5cf6"></i>

<!-- Dynamic Binding -->
<i [ngIcon]="iconName" [size]="iconSize" [color]="iconColor"></i>

⚙️ Available Props

| Property | Type | Default | Description | |---|---|---|---| | ngIcon | string | '' | Name of the icon (e.g., 'calendar', 'star', 'user') | | size | 'sm' \| 'md' \| 'lg' \| string | 'md' | Size preset ('sm', 'md', 'lg') or any custom size (e.g. '35px', '48', '2rem') | | color | 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'purple' \| 'indigo' \| 'pink' \| 'rose' \| 'coral' \| 'teal' \| 'navy' \| 'light-navy' \| 'dark' \| 'muted' \| string | '' | Predefined color name or custom CSS hex color |

📄 License

MIT © Jawwad Khan