Angular

Installation

npm install @whydrf/nava-icon-angular

Usage

All icons are standalone components. Import them directly into your component:

import { Component } from '@angular/core'
import { HomeIconComponent, SearchIconComponent } from '@whydrf/nava-icon-angular'

@Component({
  selector: 'app-navigation',
  standalone: true,
  imports: [HomeIconComponent, SearchIconComponent],
  template: `
    <nav>
      <home-icon [size]="24" />
      <search-icon [size]="24" color="gray" />
    </nav>
  `,
})
export class NavigationComponent {}

Mode

Switch between regular (stroke) and filled (solid) variants with the mode input.

<check-circle-icon mode="regular"></check-circle-icon>
<check-circle-icon mode="filled"></check-circle-icon>
<home-icon mode="filled" color="blue"></home-icon>

Dynamic Import

import { Component } from '@angular/core'
import { IconComponent } from '@whydrf/nava-icon-angular'

@Component({
  selector: 'app-dynamic-icon',
  standalone: true,
  imports: [IconComponent],
  template: `
    <nava-icon [name]="iconName" [size]="24" />
  `,
})
export class DynamicIconComponent {
  iconName = 'home'
}

Global Configuration

Provide a value for the NAVA_ICON_CONFIG injection token to set default inputs for all icons.

// app.config.ts (standalone)
import { ApplicationConfig } from '@angular/core'
import { NAVA_ICON_CONFIG } from '@whydrf/nava-icon-angular'

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: NAVA_ICON_CONFIG,
      useValue: { size: 20, color: 'gray', strokeWidth: 1.5 },
    },
  ],
}

Or in a module:

// app.module.ts
import { NAVA_ICON_CONFIG } from '@whydrf/nava-icon-angular'

@NgModule({
  providers: [
    {
      provide: NAVA_ICON_CONFIG,
      useValue: { size: 20, color: 'gray', strokeWidth: 1.5 },
    },
  ],
})
export class AppModule {}

Component inputs always override the global configuration.