Icon Components

@Component({
  selector: 'fa-icon',
  template: '',
  host: {
    class: 'ng-fa-icon',
    '[attr.title]': 'title() ?? undefined',
    '[innerHTML]': 'renderedIconHTML()',
  }
})
class FaIconComponent {
  /** The icon to display - can be icon name, array, or lookup object */
  readonly icon = model<IconProp>();
  
  /** Title for accessibility and tooltip display */
  readonly title = model<string>();
  
  /** Icon animation (most animations require Font Awesome 6+) */
  readonly animation = model<AnimationProp>();
  
  /** Icon to use as a mask over the primary icon */
  readonly mask = model<IconProp>();
  
  /** Flip the icon horizontally, vertically, or both */
  readonly flip = model<FlipProp>();
  
  /** Icon size from xs to 10x */
  readonly size = model<SizeProp>();
  
  /** Pull icon left or right in text flow */
  readonly pull = model<PullProp>();
  
  /** Add border around the icon */
  readonly border = model<boolean>();
  
  /** Invert icon colors for dark backgrounds */
  readonly inverse = model<boolean>();
  
  /** Symbol identifier for creating reusable symbols */
  readonly symbol = model<FaSymbol>();
  
  /** Rotate icon by degrees (90, 180, 270) or custom angle */
  readonly rotate = model<RotateProp | string>();
  
  /** Set fixed width for icon alignment */
  readonly fixedWidth = model<boolean>();
  
  /** Transform operations for scaling, positioning, rotating */
  readonly transform = model<string | Transform>();
  
  /** ARIA role attribute (default: 'img') */
  readonly a11yRole = model<string>();
}

import { Component } from '@angular/core';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';

@Component({
  selector: 'app-example',
  template: `
    <!-- Basic icon -->
    <fa-icon [icon]="['fas', 'coffee']"></fa-icon>
    
    <!-- Icon with size and animation -->
    <fa-icon icon="spinner" size="2x" animation="spin"></fa-icon>
    
    <!-- Icon with transformation -->
    <fa-icon [icon]="['fas', 'shield-alt']" 
             [transform]="{ rotate: 30, scale: 1.2 }"></fa-icon>
    
    <!-- Icon with mask -->
    <fa-icon [icon]="['fas', 'bus']" 
             [mask]="['fas', 'circle']" 
             [transform]="{ scale: 0.6 }"></fa-icon>
             
    <!-- Accessible icon with title -->
    <fa-icon [icon]="['fas', 'info-circle']" 
             title="Information"
             a11yRole="img"></fa-icon>
  `,
  imports: [FaIconComponent]
})
export class ExampleComponent {}

// Icon name only (uses default prefix from FaConfig)
icon = "coffee";

// Array format [prefix, name]
icon = ["fas", "coffee"];
icon = ["far", "circle"];
icon = ["fab", "angular"];

// Object format
icon = { prefix: "fas", iconName: "coffee" };

// Direct icon definition
icon = {
  prefix: "fas",
  iconName: "coffee",
  icon: [640, 512, [], "f0f4", "M..."] // SVG data
};

type AnimationProp = 
  | 'beat'           // Subtle pulsing
  | 'fade'           // Fade in/out
  | 'beat-fade'      // Combination of beat and fade
  | 'bounce'         // Bouncing motion
  | 'flip'           // 3D flip effect
  | 'shake'          // Horizontal shaking
  | 'spin'           // Continuous spinning (FA5+ compatible)
  | 'spin-reverse'   // Reverse spinning
  | 'spin-pulse'     // Pulsing spin (FA5+ compatible)
  | 'spin-pulse-reverse'; // Reverse pulsing spin

type SizeProp = 
  | 'xs'   // Extra small
  | 'sm'   // Small
  | 'lg'   // Large
  | '1x'   // Normal (default)
  | '2x'   // 2 times larger
  | '3x'   // 3 times larger
  | '4x'   // 4 times larger
  | '5x'   // 5 times larger
  | '6x'   // 6 times larger
  | '7x'   // 7 times larger
  | '8x'   // 8 times larger
  | '9x'   // 9 times larger
  | '10x'; // 10 times larger

interface Transform {
  /** Scale factor (default: 1) */
  size?: number;
  /** Horizontal offset in icon units */
  x?: number;
  /** Vertical offset in icon units */
  y?: number;
  /** Rotation angle in degrees */
  rotate?: number;
  /** Flip horizontally */
  flipX?: boolean;
  /** Flip vertically */
  flipY?: boolean;
}

// Transform string format
type TransformString = string; // e.g., "rotate-30 scale-0.6"

// Object format
transform = { rotate: 90, scale: 1.5, x: 10 };

// String format
transform = "rotate-90 scale-1.5 right-10";

// Combined transformations
transform = { rotate: 45, flipX: true, size: 0.8 };

// Error prevention
constructor(private library: FaIconLibrary) {
  // Always add icons before using
  library.addIcons(faCoffee, faSpinner);
}

// Check if icon exists
const iconDef = library.getIconDefinition('fas', 'coffee');
if (!iconDef) {
  console.warn('Icon not found in library');
}