tessl/npm-fortawesome--angular-fontawesome

Official Angular component for Font Awesome 5+ providing a comprehensive set of components for rendering icons, layers, and stacks

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Angular FontAwesome

Name: tessl/npm-fortawesome--angular-fontawesome
Author: tessl

Angular FontAwesome is the official Angular component library for integrating Font Awesome icons into Angular applications. It provides a comprehensive set of Angular components for rendering Font Awesome 5, 6, and 7 icons with full TypeScript support, tree-shaking optimization, and Angular 20.x compatibility.

Package Information

Package Name: @fortawesome/angular-fontawesome
Package Type: npm
Language: TypeScript
Installation: npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core

Core Imports

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

For individual component imports:

import { 
  FaIconComponent, 
  FaDuotoneIconComponent,
  FaLayersComponent,
  FaLayersTextComponent,
  FaLayersCounterComponent,
  FaStackComponent,
  FaStackItemSizeDirective
} from '@fortawesome/angular-fontawesome';

Basic Usage

Standalone Components (Angular 14+)

import { Component } from '@angular/core';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee, faSpinner } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  imports: [FaIconComponent], // Import components directly
  template: `
    <fa-icon [icon]="faCoffee"></fa-icon>
    <fa-icon [icon]="faSpinner" size="2x" animation="spin"></fa-icon>
  `
})
export class AppComponent {
  faCoffee = faCoffee;
  faSpinner = faSpinner;
  
  constructor(library: FaIconLibrary) {
    // Add icons to library for string-based usage
    library.addIcons(faCoffee, faSpinner);
  }
}

Traditional Modules

import { NgModule } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  imports: [FontAwesomeModule],
  // ...
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas);
  }
}

// In your component template
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
<fa-icon icon="coffee" size="2x" animation="spin"></fa-icon>

Architecture

Angular FontAwesome is built around several key components:

FontAwesome Module: Main Angular module that imports and exports all components and services for traditional module-based applications
Icon Components: Core rendering components (FaIconComponent, FaDuotoneIconComponent)
Layout Components: Composition components for complex layouts (FaLayersComponent, FaStackComponent)
Icon Library: Service for managing and caching icon definitions
Configuration Service: Global settings and customization options
Type System: Full TypeScript integration with extensive type definitions

Capabilities

Icon Rendering

Core icon rendering functionality supporting Font Awesome 5, 6, and 7 with extensive customization options including animations, transformations, and styling.

// Basic icon component
interface FaIconComponent {
  icon: IconProp;
  title?: string;
  animation?: AnimationProp;
  size?: SizeProp;
  flip?: FlipProp;
  rotate?: RotateProp | string;
  pull?: PullProp;
  border?: boolean;
  inverse?: boolean;
  fixedWidth?: boolean;
  mask?: IconProp;
  transform?: string | Transform;
  symbol?: FaSymbol;
  a11yRole?: string;
}

Icon Components

Duotone Icons

Specialized duotone icon rendering with layer color and opacity customization for Font Awesome Pro duotone icons.

interface FaDuotoneIconComponent extends FaIconComponent {
  swapOpacity?: 'true' | 'false' | boolean;
  primaryOpacity?: string | number;
  secondaryOpacity?: string | number;
  primaryColor?: string;
  secondaryColor?: string;
}

Duotone Icons

Icon Layers

Layered icon compositions for creating badges, notifications, and complex icon combinations with text and counter overlays.

interface FaLayersComponent {
  size?: SizeProp;
  fixedWidth?: boolean;
}

interface FaLayersTextComponent {
  content: string; // required
  title?: string;
  flip?: FlipProp;
  size?: SizeProp;
  pull?: PullProp;
  border?: boolean;
  inverse?: boolean;
  rotate?: RotateProp | string;
  fixedWidth?: boolean;
  transform?: string | Transform;
}

interface FaLayersCounterComponent {
  content: string; // required
  title?: string;
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
}

Icon Layers

Icon Stacks

Stacked icon compositions for creating multi-layered icons with foreground and background elements.

interface FaStackComponent {
  size?: SizeProp;
}

interface FaStackItemSizeDirective {
  stackItemSize: '1x' | '2x';
}

Icon Stacks

Library Management

Icon library service for efficiently managing icon definitions, adding individual icons or icon packs, and retrieving icons by prefix and name.

interface FaIconLibrary {
  addIcons(...icons: IconDefinition[]): void;
  addIconPacks(...packs: IconPack[]): void;
  getIconDefinition(prefix: IconPrefix, name: IconName): IconDefinition | null;
}

Library Management

Configuration

Global configuration service for setting default behaviors, icon prefixes, fallback icons, and CSS injection settings.

interface FaConfig {
  defaultPrefix: IconPrefix; // default: 'fas'
  fallbackIcon: IconDefinition | null; // default: null
  fixedWidth?: boolean;
  autoAddCss: boolean; // default: true
}

Configuration

Core Types

// Icon specification types
type IconProp = IconName | [IconPrefix, IconName] | IconLookup;
type IconPrefix = 'fas' | 'far' | 'fab' | 'fal' | 'fad' | 'fat' | (string & {});
type IconName = string & {};

interface IconLookup {
  prefix: IconPrefix;
  iconName: IconName;
}

interface IconDefinition {
  prefix: IconPrefix;
  iconName: IconName;
  icon: [number, number, string[], string, string | string[]];
}

interface IconPack {
  [key: string]: IconDefinition;
}

// Animation and styling types
type AnimationProp = 'beat' | 'fade' | 'beat-fade' | 'bounce' | 'flip' | 
  'shake' | 'spin' | 'spin-reverse' | 'spin-pulse' | 'spin-pulse-reverse';

type SizeProp = 'xs' | 'sm' | 'lg' | '1x' | '2x' | '3x' | '4x' | '5x' | 
  '6x' | '7x' | '8x' | '9x' | '10x';

type FlipProp = 'horizontal' | 'vertical' | 'both';
type PullProp = 'left' | 'right';
type RotateProp = 90 | 180 | 270;

// Core FontAwesome types (re-exported from fontawesome-svg-core)
interface Transform {
  size?: number;
  x?: number;
  y?: number;
  rotate?: number;
  flipX?: boolean;
  flipY?: boolean;
}

type FaSymbol = boolean | string;

// Additional re-exported types from fontawesome-svg-core
interface IconParams {
  title?: string;
  transform?: Transform;
  classes?: string[];
  mask?: IconDefinition;
  symbol?: FaSymbol;
  attributes?: { [key: string]: string };
  styles?: { [key: string]: string };
}

interface CounterParams {
  title?: string;
  classes?: string[];
}

interface TextParams {
  title?: string;
  transform?: Transform;
  classes?: string[];
  styles?: { [key: string]: string };
}