or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-features.mdconfiguration.mddom-operations.mdicon-rendering.mdindex.mdlibrary-management.md
tile.json

tessl/npm-fortawesome--fontawesome-svg-core

The Font Awesome SVG JavaScript library for programmatic icon rendering and DOM manipulation

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@fortawesome/fontawesome-svg-core@7.0.x

To install, run

npx @tessl/cli install tessl/npm-fortawesome--fontawesome-svg-core@7.0.0

index.mddocs/

Font Awesome SVG Core

Font Awesome SVG Core is the foundational JavaScript library for the Font Awesome 7 icon system. It provides programmatic icon rendering, DOM manipulation, and configuration management for SVG-based icons. This library enables dynamic icon creation, styling, and transformation without requiring font files or CSS dependencies.

Package Information

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

Core Imports

import { 
  icon, 
  library, 
  dom, 
  config,
  findIconDefinition,
  toHtml,
  layer,
  text,
  counter
} from "@fortawesome/fontawesome-svg-core";

For CommonJS:

const { 
  icon, 
  library, 
  dom, 
  config,
  findIconDefinition 
} = require("@fortawesome/fontawesome-svg-core");

Basic Usage

import { icon, library } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser } from "@fortawesome/free-solid-svg-icons";

// Add icons to the library
library.add(faHome, faUser);

// Create an icon
const homeIcon = icon({ prefix: 'fas', iconName: 'home' });

// Convert to HTML
document.body.innerHTML = homeIcon.html[0];

// Or use the abstract representation
console.log(homeIcon.abstract);

Architecture

Font Awesome SVG Core is built around several key components:

  • Icon Rendering Engine: Core icon() function that converts icon definitions to renderable objects
  • Library System: Global icon registry (library) for managing available icons
  • DOM Integration: Automated DOM manipulation (dom) for finding and replacing icons in HTML
  • Configuration Management: Global settings (config) for customizing behavior
  • Transform System: Advanced icon transformation and styling capabilities
  • Layer Composition: Multi-icon layer system for complex compositions
  • Text Integration: Text rendering alongside icons with consistent styling

Capabilities

Icon Rendering

Core icon rendering functionality for converting icon definitions to HTML, SVG, or abstract representations.

function icon(
  icon: IconName | IconLookup, 
  params?: IconParams
): Icon;

interface IconParams {
  title?: string;
  titleId?: string;
  classes?: string | string[];
  attributes?: { [key: string]: number | string };
  styles?: { [key: string]: string };
  transform?: Transform;
  symbol?: string | boolean;
  mask?: IconLookup;
  maskId?: string;
}

Icon Rendering

Library Management

Icon library system for registering and managing available icon definitions.

interface Library {
  add(...definitions: Array<IconDefinition | IconPack | Array<IconDefinition | IconPack>>): void;
  reset(): void;
}

const library: Library;

function findIconDefinition(iconLookup: IconLookup): IconDefinition;

Library Management

DOM Operations

Automated DOM scanning and icon replacement with CSS injection capabilities.

interface DOM {
  i2svg(params?: { node: Node; callback?: () => void }): Promise<void>;
  css(): string;
  insertCss(): string;
  watch(): void;
}

const dom: DOM;

DOM Operations

Configuration

Global configuration object for customizing Font Awesome behavior.

interface Config {
  familyPrefix: string;
  cssPrefix: string;
  styleDefault: IconPrefix | CssStyleClass | IconStyle;
  familyDefault: IconFamily;
  replacementClass: string;
  autoReplaceSvg: boolean | 'nest';
  autoAddCss: boolean;
  searchPseudoElements: boolean;
  searchPseudoElementsWarnings: boolean;
  searchPseudoElementsFullScan: boolean;
  observeMutations: boolean;
  keepOriginalSource: boolean;
  measurePerformance: boolean;
  mutateApproach: "async" | "sync";
  showMissingIcons: boolean;
}

const config: Config;

function noAuto(): void;

Configuration

Advanced Features

Complex icon compositions, transformations, and text integration.

function layer(
  assembler: (addLayerCallback: (layerToAdd: Icon | Text | Icon[] | Text[]) => void) => void,
  params?: LayerParams
): Layer;

function text(content: string, params?: TextParams): Text;

function counter(content: string | number, params?: CounterParams): Counter;

function toHtml(content: any): string;

Advanced Features

Types

// Core icon types (re-exported from @fortawesome/fontawesome-common-types)
type IconName = '0' | '1' | '11ty' | /* ... 2555 total icon names */;
type IconPrefix = "fas" | "fass" | "far" | "fasr" | "fal" | "fasl" | "fat" | "fast" | "fad" | "fadr" | "fadl" | "fadt" | "fasds" | "fasdr" | "fasdl" | "fasdt" | "fab" | "faslr" | "faslpr" | "fawsb" | "fatl" | "fans" | "fands" | "faes" | "fajr" | "fajfr" | "fajdr" | "facr" | "fak" | "fakd";
type IconFamily = "classic" | "duotone" | "sharp" | "sharp-duotone" | "chisel" | "etch" | "jelly" | "jelly-duo" | "jelly-fill" | "notdog" | "notdog-duo" | "slab" | "slab-press" | "thumbprint" | "whiteboard";
type IconStyle = "solid" | "regular" | "light" | "thin" | "duotone" | "brands" | "semibold";
type CssStyleClass = "fa-solid" | "fa-regular" | "fa-light" | "fa-thin" | "fa-duotone" | "fa-brands" | "fa-semibold";
type IconPathData = string | string[];

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

interface IconDefinition extends IconLookup {
  icon: [
    number,        // width
    number,        // height
    string[],      // ligatures
    string,        // unicode
    IconPathData   // svgPathData
  ];
}

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

// FontAwesome object types
interface FontawesomeObject {
  readonly abstract: AbstractElement[];
  readonly html: string[];
  readonly node: HTMLCollection;
}

interface Icon extends FontawesomeObject, IconDefinition {
  readonly type: "icon";
}

interface Text extends FontawesomeObject {
  readonly type: "text";
}

interface Counter extends FontawesomeObject {
  readonly type: "counter";
}

interface Layer extends FontawesomeObject {
  readonly type: "layer";
}

interface AbstractElement {
  tag: string;
  attributes: any;
  children?: AbstractElement[];
}

// Transform and styling types
interface Transform {
  size?: number;
  x?: number;
  y?: number;
  rotate?: number;
  flipX?: boolean;
  flipY?: boolean;
}

type IconProp = IconName | [IconPrefix, IconName] | IconLookup;
type FlipProp = "horizontal" | "vertical" | "both";
type SizeProp = "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x";
type PullProp = "left" | "right";
type RotateProp = 90 | 180 | 270;
type FaSymbol = string | boolean;

// Parameter interfaces
interface Params {
  title?: string;
  titleId?: string;
  classes?: string | string[];
  attributes?: { [key: string]: number | string };
  styles?: { [key: string]: string };
}

interface LayerParams {
  classes?: string | string[];
}

interface TextParams extends Params {
  transform?: Transform;
}

interface CounterParams extends Params {
}