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

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

—

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

Font Awesome SVG Core

Name: tessl/npm-fortawesome--fontawesome-svg-core
Author: tessl

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 {
}