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

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@fortawesome/fontawesome-common-types@6.7.x
Publish Source
CLI
Badge
tessl/npm-fortawesome--fontawesome-common-types badge