Notification Counter Overlay

A Vue component that layers a text overlay on top of an icon and can switch the overlay into the dependency's counter-style badge while keeping layout controls intact.

Capabilities

Counter badge rendering

• With asCounter enabled, renders the overlay using the dependency's counter styling instead of its default text styling, while the base icon remains visible. @test
• With asCounter disabled for the same overlay value, renders the overlay using the default text styling with no counter-specific styles remaining. @test

Position and transform preservation

• Applies the provided position or transform to the overlay so it remains anchored (e.g., top-right badge) whether counter mode is on or off. @test

Reactive updates

• Updating asCounter or overlay at runtime updates the rendered overlay without remounting the underlying icon. @test

Implementation

@generates

API

export interface CounterOverlayProps {
  icon: unknown; // Value accepted by the icon layer from the dependency
  overlay: string | number;
  asCounter?: boolean; // defaults to false
  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  transform?: string; // optional positional transform string understood by the dependency
  fixedWidth?: boolean; // optional fixed-width mode for the container
  ariaLabel?: string; // optional accessible label for the overlay
}

Dependencies { .dependencies }

@fortawesome/vue-fontawesome { .dependency }

Provides layered icon rendering and counter-style overlays used by the component.