or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-fortawesome--vue-fontawesome

Official Vue component for Font Awesome 7

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@fortawesome/vue-fontawesome@3.1.x

To install, run

npx @tessl/cli install tessl/npm-fortawesome--vue-fontawesome@3.1.0

index.mddocs/

Vue FontAwesome

Vue FontAwesome provides the official Vue 3 components for integrating Font Awesome icons into Vue applications. It enables developers to use Font Awesome's SVG icons as Vue components with full reactivity, TypeScript support, and seamless integration with Vue's component system.

Package Information

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

Core Imports

import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from "@fortawesome/vue-fontawesome";

For CommonJS:

const { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } = require("@fortawesome/vue-fontawesome");

Basic Usage

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";

// In your Vue component
<template>
  <div>
    <!-- Simple icon -->
    <FontAwesomeIcon :icon="faCoffee" />
    
    <!-- Icon with styling -->
    <FontAwesomeIcon :icon="['fas', 'coffee']" size="2x" spin />
    
    <!-- Layered icons -->
    <FontAwesomeLayers fixed-width>
      <FontAwesomeIcon :icon="['fas', 'circle']" />
      <FontAwesomeIcon :icon="['fas', 'home']" inverse transform="shrink-6" />
    </FontAwesomeLayers>
  </div>
</template>

Capabilities

FontAwesome Icon Component

Primary component for rendering individual Font Awesome icons as SVG elements with comprehensive styling and animation options.

interface FontAwesomeIconProps {
  // Icon specification (required)
  icon: object | Array<string> | string | IconDefinition;

  // Visual styling
  border?: boolean;
  fixedWidth?: boolean;
  size?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
  
  // Transformations
  flip?: 'horizontal' | 'vertical' | 'both' | boolean;
  rotation?: 90 | 180 | 270 | '90' | '180' | '270';
  rotateBy?: boolean;
  transform?: object | string;
  
  // Layout & positioning  
  pull?: 'right' | 'left';
  listItem?: boolean;
  inverse?: boolean;
  
  // Animations
  spin?: boolean;
  pulse?: boolean;
  bounce?: boolean;
  shake?: boolean;
  beat?: boolean;
  fade?: boolean;
  beatFade?: boolean;
  flash?: boolean;
  spinPulse?: boolean;
  spinReverse?: boolean;
  
  // Advanced features
  mask?: object | Array<string> | string;
  maskId?: string;
  swapOpacity?: boolean;
  symbol?: boolean | string;
  widthAuto?: boolean;
  
  // Accessibility (pre-v7.0.0)
  title?: string;
  titleId?: string;
}

Icon Specification Formats:

  • String: "coffee" (defaults to fas prefix)
  • Array: ["fas", "coffee"] (prefix and icon name)
  • Object: { prefix: "fas", iconName: "coffee" }
  • IconDefinition: Direct icon definition objects

Return Value: VNode | null - Vue Virtual DOM node representing the rendered icon

Prop Validation Rules:

  • flip: true | false | 'horizontal' | 'vertical' | 'both'
  • pull: 'right' | 'left'
  • rotation: 90 | 180 | 270
  • size: All documented size values are validated

Usage Examples:

// Basic icon
<FontAwesomeIcon :icon="['fas', 'coffee']" />

// Styled icon
<FontAwesomeIcon 
  :icon="faCoffee" 
  size="2x" 
  :spin="true" 
  :border="true" 
/>

// Transformed icon
<FontAwesomeIcon 
  :icon="['fas', 'shield']" 
  :flip="'horizontal'" 
  :rotation="90" 
  transform="shrink-6 up-2" 
/>

// Animated icon
<FontAwesomeIcon 
  :icon="['fas', 'spinner']" 
  :spin="true" 
/>

FontAwesome Layers Container

Container component for creating layered icon compositions with multiple icons and text overlays.

interface FontAwesomeLayersProps {
  fixedWidth?: boolean;
}

Return Value: VNode - Vue Virtual DOM node representing the layers container

Usage Examples:

// Icon with badge
<FontAwesomeLayers fixed-width>
  <FontAwesomeIcon :icon="['fas', 'envelope']" />
  <FontAwesomeLayersText 
    :value="99" 
    :counter="true" 
    position="top-right" 
  />
</FontAwesomeLayers>

// Layered icon composition
<FontAwesomeLayers>
  <FontAwesomeIcon :icon="['fas', 'circle']" />
  <FontAwesomeIcon 
    :icon="['fas', 'check']" 
    :inverse="true" 
    transform="shrink-6" 
  />
</FontAwesomeLayers>

FontAwesome Layers Text

Component for adding text content as layers over icons, useful for badges, counters, and labels.

interface FontAwesomeLayersTextProps {
  value: string | number;
  transform?: object | string;
  counter?: boolean;
  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
}

Return Value: VNode - Vue Virtual DOM node representing the text layer

Prop Validation Rules:

  • position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'

Usage Examples:

// Counter badge
<FontAwesomeLayers>
  <FontAwesomeIcon :icon="['fas', 'bell']" />
  <FontAwesomeLayersText 
    :value="5" 
    :counter="true" 
    position="top-right" 
  />
</FontAwesomeLayers>

// Text overlay
<FontAwesomeLayers>
  <FontAwesomeIcon :icon="['fas', 'certificate']" />
  <FontAwesomeLayersText 
    value="NEW" 
    transform="shrink-11.5 rotate--30" 
  />
</FontAwesomeLayers>

Types

type IconDefinition = {
  prefix: string;
  iconName: string;
  icon: any;
};

type SizeProp = '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';

type FlipProp = 'horizontal' | 'vertical' | 'both' | boolean;

type RotateProp = 90 | 180 | 270 | '90' | '180' | '270';

type PullProp = 'right' | 'left';

type Transform = {
  size?: number;     // Scale factor
  x?: number;        // Horizontal offset
  y?: number;        // Vertical offset
  rotate?: number;   // Rotation in degrees
  flipX?: boolean;   // Horizontal flip
  flipY?: boolean;   // Vertical flip
};

type Counter = {
  backgroundColor?: string;
  color?: string;
};

Animation Types

Vue FontAwesome supports comprehensive animation options:

  • spin: Continuous 360° rotation
  • pulse: Smooth pulsing effect
  • bounce: Bouncing animation
  • shake: Shaking motion
  • beat: Beating/scaling animation
  • fade: Fade in/out effect
  • beatFade: Combined beat and fade
  • flash: Flashing effect
  • spinPulse: Combined spin and pulse
  • spinReverse: Reverse direction spin

Transform System

The transform system allows complex icon modifications:

// String format
transform="shrink-6 up-2 rotate-30"

// Object format
:transform="{ size: 16, x: 0, y: -2, rotate: 30 }"

Transform Operations:

  • shrink-N / grow-N: Scale the icon
  • up-N / down-N / left-N / right-N: Move the icon
  • rotate-N: Rotate by N degrees
  • flip-h / flip-v: Flip horizontally/vertically

Dependencies

Peer Dependencies

  • @fortawesome/fontawesome-svg-core: ~1 || ~6 || ~7 (Font Awesome core library)
  • vue: >= 3.0.0 < 4 (Vue.js framework)

Required Setup

Before using the components, you need to configure the Font Awesome library:

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

// Add icons to the library
library.add(fas);

// Register the component globally (optional)
app.component('FontAwesomeIcon', FontAwesomeIcon);

Error Handling

Common issues and solutions:

  • Icon not found: Ensure the icon is added to the Font Awesome library using library.add()
  • Invalid icon prop: Component will log console error and may not render
  • Missing Font Awesome core: Ensure @fortawesome/fontawesome-svg-core is installed and configured
  • TypeScript errors: Import icon definitions properly from Font Awesome packages
  • Prop validation failures: Invalid prop values will trigger Vue warnings in development
  • Performance: Use tree-shaking to include only needed icons
  • Server-side rendering: Configure proper SSR support for SVG rendering

Specific Error Scenarios:

  • icon prop validation fails → Console error, no icon rendered
  • Font Awesome library not initialized → Icons may not display properly
  • Invalid size/flip/rotation values → Vue development warnings

Accessibility Features

  • Automatic ARIA attributes: Components automatically add role="img" to SVG elements
  • Title support: Use title prop (pre-v7.0.0) for accessible icon descriptions
  • Title ID support: Use titleId prop for linking to external descriptions
  • Screen reader compatibility: SVG output is optimized for assistive technologies
  • Semantic vs decorative: Use aria-hidden="true" for decorative icons
  • Proper labeling: Icons with meaning should include accessible text or labels

Best Practices:

  • Decorative icons: <FontAwesomeIcon :icon="icon" aria-hidden="true" />
  • Semantic icons: <FontAwesomeIcon :icon="icon" :title="'Description'" />
  • Interactive icons: Wrap in buttons with proper labels