CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-fortawesome--fontawesome-common-types

Common TypeScript type definitions for Font Awesome 6 JavaScript packages

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Font Awesome Common Types

Font Awesome Common Types provides shared TypeScript type definitions for the Font Awesome 6 JavaScript ecosystem. It serves as a foundational type library that enables type-safe icon handling across all Font Awesome packages, with comprehensive enumeration of 2500+ available icons.

Package Information

  • Package Name: @fortawesome/fontawesome-common-types
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @fortawesome/fontawesome-common-types

Core Imports

import { 
  IconName, 
  IconPrefix, 
  IconFamily,
  CssStyleClass,
  IconStyle,
  IconPathData,
  IconDefinition, 
  IconLookup, 
  IconPack 
} from "@fortawesome/fontawesome-common-types";

For CommonJS:

const { 
  IconName, 
  IconPrefix, 
  IconFamily,
  CssStyleClass,
  IconStyle,
  IconPathData,
  IconDefinition, 
  IconLookup, 
  IconPack 
} = require("@fortawesome/fontawesome-common-types");

Basic Usage

import { IconName, IconPrefix, IconDefinition, IconLookup } from "@fortawesome/fontawesome-common-types";

// Type-safe icon identification
const iconLookup: IconLookup = {
  prefix: "fas",
  iconName: "user"
};

// Working with icon definitions
const myIcon: IconDefinition = {
  prefix: "fas",
  iconName: "home",
  icon: [
    512,  // width
    512,  // height
    [],   // ligatures
    "f015", // unicode
    "M488 312.7V456c0 13.3-10.7 24-24 24H48c-13.3 0-24-10.7-24-24V312.7c0-3.6 .8-7.1 2.4-10.2L176 94.5c6.4-10.8 16.8-17.3 28-17.3s21.6 6.5 28 17.3L381.6 302.5c1.6 3.1 2.4 6.6 2.4 10.2z" // SVG path
  ]
};

// Type-safe icon names
const validIconNames: IconName[] = ["home", "user", "star", "heart", "search"];

Architecture

The package is designed with maximum reusability in mind:

  • Type Foundation: Provides essential type definitions shared across Font Awesome ecosystem
  • Icon Enumeration: Comprehensive listing of all 2500+ Font Awesome icons for type safety
  • Style System: Complete mapping of icon families, prefixes, and CSS classes
  • Zero Runtime: Pure TypeScript definitions with no runtime dependencies
  • Ecosystem Integration: Designed as dependency for other Font Awesome packages, not direct consumption

Capabilities

Icon Identification Types

Core types for identifying and categorizing Font Awesome icons across different families and styles.

/** Available icon families in Font Awesome */
type IconFamily = "classic" | "duotone" | "sharp" | "sharp-duotone";

/** Icon prefixes for different styles */
type IconPrefix = "fas" | "fass" | "far" | "fasr" | "fal" | "fasl" | "fat" | "fast" | "fad" | "fadr" | "fadl" | "fadt" | "fasds" | "fasdr" | "fasdl" | "fasdt" | "fab" | "fak" | "fakd";

/** CSS class names for icon styles */
type CssStyleClass = "fa-solid" | "fa-regular" | "fa-light" | "fa-thin" | "fa-duotone" | "fa-brands";

/** Icon style names without CSS prefix */
type IconStyle = "solid" | "regular" | "light" | "thin" | "duotone" | "brands";

/** SVG path data format for icons */
type IconPathData = string | string[];

Icon Name Enumeration

Comprehensive enumeration of all available Font Awesome icon names for complete type safety.

/** 
 * Complete enumeration of all Font Awesome icon names (2500+ icons)
 * Includes numeric icons, standard icons, brand icons, and aliases
 */
type IconName = '0' | '1' | '2' | '3' | '4' | '42-group' | '5' | '500px' | '6' | '7' | '8' | '9' | 
  'a' | 'accessible-icon' | 'accusoft' | 'ad' | 'add' | 'address-book' | 'address-card' | 'adjust' | 
  'adn' | 'adversal' | 'affiliatetheme' | 'air-freshener' | 'airbnb' | 'algolia' | 'align-center' | 
  'align-justify' | 'align-left' | 'align-right' | 'alipay' | 'allergies' | 'amazon' | 'amazon-pay' | 
  'ambulance' | 'american-sign-language-interpreting' | 'amilia' | 'anchor' | 'anchor-circle-check' | 
  'anchor-circle-exclamation' | 'anchor-circle-xmark' | 'anchor-lock' | 'android' | 'angellist' | 
  'angle-double-down' | 'angle-double-left' | 'angle-double-right' | 'angle-double-up' | 'angle-down' | 
  'angle-left' | 'angle-right' | 'angle-up' | 'angles-down' | 'angles-left' | 'angles-right' | 
  'angles-up' | 'angry' | 'angrycreative' | 'angular' | 'ankh' | 'app-store' | 'app-store-ios' | 
  'apper' | 'apple' | 'apple-alt' | 'apple-pay' | 'apple-whole' | 'archive' | 'archway' | 
  'area-chart' | 'arrow-alt-circle-down' | 'arrow-alt-circle-left' | 'arrow-alt-circle-right' | 
  'arrow-alt-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 
  'arrow-circle-up' | 'arrow-down' | 'arrow-down-1-9' | 'arrow-down-9-1' | 'arrow-down-a-z' | 
  'arrow-down-long' | 'arrow-down-short-wide' | 'arrow-down-up-across-line' | 'arrow-down-up-lock' | 
  'arrow-down-wide-short' | 'arrow-down-z-a' | 'arrow-left' | 'arrow-left-long' | 'arrow-left-rotate' | 
  /* ... 2500+ more icon names ... */;

Icon Data Structures

Interfaces for working with icon definitions and collections.

/** Basic interface for icon identification */
interface IconLookup {
  /** The icon prefix (style identifier) */
  prefix: IconPrefix;
  /** The specific icon name */
  iconName: IconName;
}

/** Complete icon definition including SVG data */
interface IconDefinition extends IconLookup {
  /** Icon tuple containing width, height, ligatures, unicode, and SVG path data */
  icon: [
    number,        // width
    number,        // height
    string[],      // ligatures
    string,        // unicode
    IconPathData   // SVG path data
  ];
}

/** Collection of icon definitions indexed by key */
interface IconPack {
  [key: string]: IconDefinition;
}

Types

Complete type definitions for all package exports:

type IconFamily = "classic" | "duotone" | "sharp" | "sharp-duotone";

type IconPrefix = "fas" | "fass" | "far" | "fasr" | "fal" | "fasl" | "fat" | "fast" | "fad" | "fadr" | "fadl" | "fadt" | "fasds" | "fasdr" | "fasdl" | "fasdt" | "fab" | "fak" | "fakd";

type CssStyleClass = "fa-solid" | "fa-regular" | "fa-light" | "fa-thin" | "fa-duotone" | "fa-brands";

type IconStyle = "solid" | "regular" | "light" | "thin" | "duotone" | "brands";

type IconPathData = string | string[];

type IconName = '0' | '1' | '2' | '3' | '4' | '42-group' | '5' | '500px' | /* ... 2500+ icon names ... */ 'zhihu';

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

interface IconDefinition extends IconLookup {
  icon: [number, number, string[], string, IconPathData];
}

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

docs

index.md

tile.json