Animated Icon Showcase

A Vue component that renders a primary icon (and optional badge) with selectable animation presets sourced from the dependency.

Capabilities

Static render when animation is disabled

• When effect is "none", the rendered icon output uses no animation styles from the dependency. @test

Applies named animation preset

• Passing effect as "spin" renders the icon with the dependency's spinning animation. @test
• Passing effect as "bounce" renders the icon with the dependency's bouncing animation. @test

Switches animations reactively

• Updating the effect prop from "pulse" to "fade" updates the rendered icon to the new animation without remounting. @test

Stacks animated badge

• When badge icon data is provided, render it with layering support so the badge sits behind the primary icon; badgeEffect can differ from effect. @test

Implementation

@generates

API

export type AnimationEffect =
  | "none"
  | "spin"
  | "pulse"
  | "bounce"
  | "shake"
  | "beat"
  | "fade"
  | "beatFade"
  | "flash"
  | "spinPulse"
  | "spinReverse"
  | "swapOpacity";

export interface IconInput {
  name: string;
  style?: "solid" | "regular" | "light" | "thin" | "duotone" | "brands";
}

export interface AnimatedIconProps {
  icon: IconInput;
  badge?: IconInput;
  effect: AnimationEffect;
  badgeEffect?: Exclude<AnimationEffect, "none">;
  ariaLabel?: string;
}

Dependencies { .dependencies }

@fortawesome/vue-fontawesome { .dependency }

Provides animated icon rendering and layering helpers.