Accessible Icon Symbols

Create reusable SVG symbols from a shared icon set while preserving accessible titles for each definition and per-instance render. The symbol ids should use a predictable prefix (default icon-) so a single definitions block can be mounted once and reused throughout the app.

Capabilities

Build symbol definitions

• Given a list of icons with names and optional default titles, render a single SVG <defs> block that contains one <symbol> per icon, uses a predictable id prefix for each symbol, and includes a <title> element when a title is provided. @test

Reuse symbols in markup

• Rendering an icon by name outputs an SVG that references the corresponding symbol id and accepts a custom CSS class without duplicating the symbol definition. @test

Override per-instance titles

• Providing a title when rendering an icon instance attaches an accessible title or aria-labelledby reference for that usage while still pointing at the shared symbol definition. @test

Implementation

@generates

API

export type IconDescriptor = {
  name: string;
  title?: string;
};

export interface SymbolsOptions {
  idPrefix?: string; // defaults to "icon-"
  className?: string;
}

export interface IconUseOptions {
  title?: string;
  labelledBy?: string;
  className?: string;
}

export function renderSymbols(
  icons: IconDescriptor[],
  options?: SymbolsOptions
): import("vue").VNode;

export function renderIcon(
  name: string,
  options?: IconUseOptions
): import("vue").VNode;

Dependencies { .dependencies }

@fortawesome/vue-fontawesome { .dependency }

Generates SVG output that supports reusable symbol definitions and accessible title metadata.