@arpudhabotupload/fn-icon-angular

An Angular icon component library with dynamic SVG loading and Tailwind CSS support.

Features

• 🎨 Multiple icon variants (Colour, Duotone, Fill, Line)
• 📏 Flexible sizing with predefined size names
• 🎯 Dynamic SVG loading from assets
• 🌈 Customizable colors and stroke widths
• ♿ Accessibility-ready
• 📦 TypeScript support
• ⚡ Standalone component (Angular 14+)
• 🔥 Zero dependencies (except Angular peer dependencies)

Installation

npm install @arpudhabotupload/fn-icon-angular

or

yarn add @arpudhabotupload/fn-icon-angular

or

pnpm add @arpudhabotupload/fn-icon-angular

Setup

HttpClient Configuration

This component uses Angular's HttpClient to load SVG files. You need to provide HttpClient in your application:

For standalone apps (Angular 14+):

// main.ts or app.config.ts
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient()
  ]
});

For module-based apps:

// app.module.ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    // ... other imports
  ],
})
export class AppModule {}

🎨 Icon Setup

Important: This package does NOT include icon files. You need to provide your own SVG icons.

Place your icon files in the public/assets/icons/ folder of your Angular app following this structure:

public/
  assets/
    icons/
      {Variant}/        # Line, Fill, Duotone, or Colour
        {Size}px/       # 10px, 16px, 20px, 24px, 32px, 48px
          {name}.svg    # For 10px and 16px
          {name}--{size}.svg  # For 20px, 24px, 32px, 48px

Example:

• public/assets/icons/Line/24px/home--24.svg
• public/assets/icons/Line/16px/home.svg
• public/assets/icons/Fill/32px/star--32.svg

Quick Setup Script

Run this command in your project to create the folder structure automatically:

npx setup-fn-icons

Or with a custom path:

npx setup-fn-icons public/my-custom-icons

See ICON_SETUP.md for detailed icon organization guide.

Usage

Basic Usage

import { Component } from '@angular/core';
import { FNIconComponent } from '@arpudhabotupload/fn-icon-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FNIconComponent],
  template: `
    <div>
      <fn-icon name="home"></fn-icon>
    </div>
  `
})
export class AppComponent {}

With Tailwind CSS

import { Component } from '@angular/core';
import { FNIconComponent } from '@arpudhabotupload/fn-icon-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FNIconComponent],
  template: `
    <div class="flex items-center gap-2">
      <fn-icon 
        name="home" 
        size="large" 
        className="text-blue-500">
      </fn-icon>
      <fn-icon 
        name="settings" 
        variant="Fill" 
        size="medium"
        className="text-gray-600 hover:text-gray-900">
      </fn-icon>
    </div>
  `
})
export class AppComponent {}

Advanced Usage

import { Component } from '@angular/core';
import { FNIconComponent } from '@arpudhabotupload/fn-icon-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FNIconComponent],
  template: `
    <div>
      <!-- Custom color -->
      <fn-icon 
        name="star" 
        variant="Fill" 
        color="#FFD700">
      </fn-icon>

      <!-- Custom stroke width for line icons -->
      <fn-icon 
        name="heart" 
        variant="Line" 
        [strokeWidth]="2"
        size="x-large">
      </fn-icon>

      <!-- Disabled state -->
      <fn-icon 
        name="trash" 
        [disabled]="true">
      </fn-icon>

      <!-- Custom base path -->
      <fn-icon 
        name="user" 
        basePath="/custom/icons/path">
      </fn-icon>
    </div>
  `
})
export class AppComponent {}

Using in Non-Standalone Components

If you're using module-based Angular components, import it in your module:

import { NgModule } from '@angular/core';
import { FNIconComponent } from '@arpudhabotupload/fn-icon-angular';

@NgModule({
  imports: [FNIconComponent],
  // ... other config
})
export class AppModule {}

Props (Inputs)

| Input | Type | Default | Description | |------|------|---------|-------------| | name | string | required | Icon name without extension | | variant | 'Colour' \| 'Duotone' \| 'Fill' \| 'Line' | 'Line' | Icon variant style | | size | 'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'x-large' \| 'xxlarge' | 'medium' | Icon size name | | color | string | - | Custom color (CSS color value) | | strokeWidth | number | - | Stroke width for line icons | | disabled | boolean | false | Disabled state (reduces opacity and changes cursor) | | className | string | '' | Additional CSS classes (works with Tailwind) | | basePath | string | 'assets/icons' | Base path for icon assets |

Size Mapping

| Size Name | Pixel Size | |-----------|------------| | extrasmall | 10px | | small | 16px | | medium | 20px | | large | 24px | | x-large | 32px | | xxlarge | 48px |

Icon File Structure

The component expects SVG files to be organized in the following structure:

public/
  assets/
    icons/
      Line/
        16px/
          icon-name.svg
        20px/
          icon-name--20.svg
        24px/
          icon-name--24.svg
        32px/
          icon-name--32.svg
        48px/
          icon-name--48.svg
      Fill/
        ...
      Colour/
        ...
      Duotone/
        ...

Note: For sizes 10px and 16px, the filename doesn't include the size suffix. For other sizes (20, 24, 32, 48), the filename includes --{size} suffix.

TypeScript

The package includes full TypeScript definitions. Import types as needed:

import type { TypeIconVariant, TypeIconSize, TypeIconSizeName } from '@arpudhabotupload/fn-icon-angular';

How It Works

1. The component fetches the SVG file dynamically based on the name, variant, and size inputs
2. It parses the SVG and normalizes colors to use currentColor for easy styling
3. Removes inline styles that might interfere with custom styling
4. Configures SVG attributes for proper scaling and accessibility
5. Renders the processed SVG inline using safe DOM manipulation

Browser Support

This component works in all modern browsers that support:

• ES2022
• DOMParser API
• Angular 18.2.15+ or Angular 19+

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.