React FontAwesome

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const { FontAwesomeIcon } = require("@fortawesome/react-fontawesome");

npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-brands-svg-icons  # optional
npm install @fortawesome/free-regular-svg-icons  # optional

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart, faSpinner } from "@fortawesome/free-solid-svg-icons";

// Basic icon
<FontAwesomeIcon icon={faHeart} />

// Array format
<FontAwesomeIcon icon={['fas', 'heart']} />

// With size and color
<FontAwesomeIcon icon={faHeart} size="2x" color="red" />

// With animation
<FontAwesomeIcon icon={faSpinner} spin />

const FontAwesomeIcon: React.ForwardRefExoticComponent<
  FontAwesomeIconProps & React.RefAttributes<SVGSVGElement>
>;

interface FontAwesomeIconProps
  extends AnimationProps,
    TransformProps,
    Omit<SVGAttributes<SVGSVGElement>, 'children' | 'mask' | 'transform'>,
    RefAttributes<SVGSVGElement> {
  /** The icon to render */
  icon: IconProp;
  /** The size of the icon from a predefined set of sizes */
  size?: SizeProp | undefined;
  /** Grab the Mask utility when you want to layer two icons */
  mask?: IconProp | undefined;
  /** Accessibility ID for the mask element */
  maskId?: string | undefined;
  /** Any additional CSS classes to apply to the icon */
  className?: string | undefined;
  /** The color of the icon. Can be any valid CSS color value */
  color?: string | undefined;
  /** Applies a border to the icon */
  border?: boolean | undefined;
  /** 
   * @deprecated Starting in FontAwesome 7.0.0, all icons are fixed width by default.
   * Use widthAuto property instead to remove fixed width.
   */
  fixedWidth?: boolean | undefined;
  /** Invert the icon color */
  inverse?: boolean | undefined;
  /** Any custom styles or CSS variable overrides for the icon element */
  style?: (CSSProperties & CSSVariables) | undefined;
  tabIndex?: number | undefined;
  /** An accessibility title for the icon to be read by screen-readers */
  title?: string | undefined;
  /** A unique ID for the accessibility title element */
  titleId?: string | undefined;
  /** When using Duotone icons, swap the opacity of the two colors */
  swapOpacity?: boolean | undefined;
  /** 
   * When set to true, the icon will automatically adjust its width
   * @since 7.0.0
   */
  widthAuto?: boolean | undefined;
}

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee, faSpinner, faHeart } from "@fortawesome/free-solid-svg-icons";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { forwardRef } from "react";

// Basic icon rendering
<FontAwesomeIcon icon={faCoffee} />

// Icon with size and styling
<FontAwesomeIcon 
  icon={faHeart} 
  size="2x" 
  color="red" 
  className="my-heart-icon" 
/>

// Animated spinning icon
<FontAwesomeIcon icon={faSpinner} spin />

// Icon with accessibility title
<FontAwesomeIcon 
  icon={faGithub} 
  title="Visit our GitHub repository"
  titleId="github-link"
/>

// Icon with custom CSS variables
<FontAwesomeIcon 
  icon={faHeart}
  beat
  style={{
    '--fa-beat-scale': '2.0',
    '--fa-animation-duration': '2s'
  }}
/>

// Forwarded ref usage
const IconWithRef = forwardRef<SVGSVGElement>((props, ref) => (
  <FontAwesomeIcon icon={faCoffee} ref={ref} {...props} />
));

interface AnimationProps {
  /** Makes the icon spin 360deg clockwise continuously */
  spin?: boolean | undefined;
  /** Makes the icon spin 360deg clockwise in 8 incremental steps */
  spinPulse?: boolean | undefined;
  /** When used with spin or spinPulse, makes the icon spin in reverse */
  spinReverse?: boolean | undefined;
  /** 
   * @deprecated Will be removed in a future version. Use spinPulse instead.
   * Makes the icon spin 360deg clockwise in 8 incremental steps 
   */
  pulse?: boolean | undefined;
  /** Makes the icon scale in and out continuously */
  beat?: boolean | undefined;
  /** Makes the icon fade in and out continuously */
  fade?: boolean | undefined;
  /** Applies both scaling and fading animations from beat and fade */
  beatFade?: boolean | undefined;
  /** Makes the icon bounce up and down */
  bounce?: boolean | undefined;
  /** Makes the icon shake */
  shake?: boolean | undefined;
}

// Spinning loader
<FontAwesomeIcon icon={faSpinner} spin />

// Pulsing heart with custom timing
<FontAwesomeIcon 
  icon={faHeart} 
  beat 
  style={{ '--fa-animation-duration': '0.5s' }}
/>

// Fading notification icon
<FontAwesomeIcon icon={faBell} fade />

// Combined beat and fade effect
<FontAwesomeIcon icon={faExclamation} beatFade />

// Reverse spinning gear
<FontAwesomeIcon icon={faCog} spin spinReverse />

interface TransformProps {
  /** 
   * @deprecated Simply wrap the icon instead, no need to pass this property.
   * For list styling, wrap in appropriate list markup.
   */
  listItem?: boolean | undefined;
  /** Flip the icon horizontally, vertically or both */
  flip?: FlipProp | boolean | undefined;
  /** Wrap text around the icon by pulling it left or right */
  pull?: PullProp | undefined;
  /** The rotation property is used to rotate the icon by 90, 180, or 270 degrees */
  rotation?: RotateProp | undefined;
  /** 
   * Custom rotation using CSS variable --fa-rotate-angle
   * @since 7.0.0
   */
  rotateBy?: boolean | undefined;
  /** Apply a custom transform to the icon using Transform config or CSS transform string */
  transform?: string | Transform | undefined;
  /** The icon should render as an SVG symbol rather than a regular element */
  symbol?: FaSymbol | undefined;
}

// Rotated arrow
<FontAwesomeIcon icon={faArrowRight} rotation={90} />

// Custom rotation angle
<FontAwesomeIcon 
  icon={faArrowRight} 
  rotateBy 
  style={{ '--fa-rotate-angle': '45deg' }}
/>

// Flipped icon
<FontAwesomeIcon icon={faShield} flip="horizontal" />

// Icon pulled left for text wrapping
<FontAwesomeIcon icon={faQuoteLeft} pull="left" />

// Custom transform
<FontAwesomeIcon 
  icon={faHeart} 
  transform="shrink-6 rotate-30" 
/>

// Power transforms with Font Awesome syntax
<FontAwesomeIcon 
  icon={faShield} 
  transform={{ rotate: 42, flipX: true }}
/>

interface CSSVariables extends FontFamilyVariables {
  '--fa-family'?: string | undefined;
  '--fa-style'?: string | undefined;
  '--fa-display'?: string | undefined;
  '--fa-inverse'?: string | undefined;
  '--fa-width'?: string | undefined;
  '--fa-li-margin'?: string | undefined;
  '--fa-li-width'?: string | undefined;
  '--fa-rotate-angle'?: string | undefined;
  '--fa-animation-delay'?: string | undefined;
  '--fa-animation-direction'?: string | undefined;
  '--fa-animation-duration'?: string | undefined;
  '--fa-animation-iteration-count'?: string | undefined;
  '--fa-animation-timing'?: string | undefined;
  '--fa-beat-scale'?: string | undefined;
  '--fa-fade-opacity'?: string | undefined;
  '--fa-beat-fade-opacity'?: string | undefined;
  '--fa-beat-fade-scale'?: string | undefined;
  '--fa-flip-x'?: string | undefined;
  '--fa-flip-y'?: string | undefined;
  '--fa-flip-z'?: string | undefined;
  '--fa-flip-angle'?: string | undefined;
  '--fa-border-color'?: string | undefined;
  '--fa-border-padding'?: string | undefined;
  '--fa-border-radius'?: string | undefined;
  '--fa-border-style'?: string | undefined;
  '--fa-border-width'?: string | undefined;
  '--fa-pull-margin'?: string | undefined;
  '--fa-stack-z-index'?: string | undefined;
  '--fa-primary-color'?: string | undefined;
  '--fa-primary-opacity'?: string | undefined;
  '--fa-secondary-color'?: string | undefined;
  '--fa-secondary-opacity'?: string | undefined;
}

type FontFamilyVariables = {
  [K in `--fa-font-${string}`]?: string | undefined;
}

// Custom animation timing
<FontAwesomeIcon 
  icon={faSpinner}
  spin
  style={{
    '--fa-animation-duration': '3s',
    '--fa-animation-timing': 'ease-in-out'
  }}
/>

// Duotone color customization
<FontAwesomeIcon 
  icon={faDuotoneIcon}
  style={{
    '--fa-primary-color': '#ff6b6b',
    '--fa-secondary-color': '#4ecdc4',
    '--fa-primary-opacity': '0.8'
  }}
/>

// Custom border styling
<FontAwesomeIcon 
  icon={faUser}
  border
  style={{
    '--fa-border-color': '#333',
    '--fa-border-width': '2px',
    '--fa-border-radius': '50%'
  }}
/>

// Beat animation customization
<FontAwesomeIcon 
  icon={faHeart}
  beat
  style={{
    '--fa-beat-scale': '1.5',
    '--fa-animation-duration': '1s'
  }}
/>

// From @fortawesome/fontawesome-svg-core
type IconProp = 
  | IconDefinition
  | [IconPrefix, IconName]
  | [IconPrefix, IconName, string[]]
  | string;

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

type FlipProp = "horizontal" | "vertical" | "both";
type PullProp = "left" | "right";
type RotateProp = 90 | 180 | 270;

interface Transform {
  size?: number;
  x?: number;
  y?: number;
  rotate?: number;
  flipX?: boolean;
  flipY?: boolean;
}

type FaSymbol = boolean | string;

interface IconDefinition {
  prefix: IconPrefix;
  iconName: IconName;
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode
    string // svgPathData
  ];
}

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

type IconPrefix = "fas" | "far" | "fal" | "fat" | "fad" | "fab" | "fak" | "fasr" | "fasl";
type IconName = string;

import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";

// Use in component props
interface MyComponentProps {
  iconConfig: FontAwesomeIconProps;
}

import { AnimationProps } from "@fortawesome/react-fontawesome";

// Use for animation configuration
interface AnimationConfig extends AnimationProps {
  duration?: string;
}

import { TransformProps } from "@fortawesome/react-fontawesome";

// Use for transform configuration
interface IconTransformConfig extends TransformProps {
  customTransform?: string;
}

import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";

// CSSVariables is part of the style property in FontAwesome Icon Properties
type StyleWithCSSVars = NonNullable<FontAwesome Icon Properties['style']>;

// Usage example
const iconStyle: StyleWithCSSVars = {
  '--fa-animation-duration': '2s',
  '--fa-primary-color': '#ff0000'
};

// Error handling examples
import { library } from '@fortawesome/fontawesome-svg-core';
import { faHeart } from '@fortawesome/free-solid-svg-icons';

// Add icons to library to avoid lookup errors
library.add(faHeart);

// Component will log error and return null for invalid icons
<FontAwesomeIcon icon={['fas', 'nonexistent-icon']} />

// Safe usage with error boundaries
function SafeIcon({ icon, fallback = null }) {
  return (
    <ErrorBoundary fallback={fallback}>
      <FontAwesomeIcon icon={icon} />
    </ErrorBoundary>
  );
}