Common TypeScript type definitions for Font Awesome 6 JavaScript packages
npx @tessl/cli install tessl/npm-fortawesome--fontawesome-common-types@6.7.0Font 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.
npm install @fortawesome/fontawesome-common-typesimport {
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");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"];The package is designed with maximum reusability in mind:
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[];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 ... */;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;
}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;
}