Layered Notification Badge

A Vue component that stacks a base icon, an optional secondary icon, and an optional badge value using the dependency's layered container capability for composable icon layouts. The solution should rely on the dependency's layering utilities rather than custom absolute positioning.

Capabilities

Layered badge overlay

• Renders the base icon with an overlaid badge when badgeValue is provided, positioning the badge at badgePosition (defaulting to top-right) and applying badgeColor when set, while keeping the base icon centered. @test

Dual icon stacking

• When overlayIcon is provided, places a secondary icon above the base icon within the same layered container while keeping both centered. @test

Fixed width alignment

• When fixedWidth is true, the layered output reserves consistent width using the dependency's fixed-width layering support so aligned icon columns do not jitter across list items. @test

Badge suppression

• When badgeValue is missing or empty, renders only the base (and optional secondary) icon with no badge markup or spacing artifacts. @test

Implementation

@generates

API

<!-- Renders a layered icon badge with optional text overlay and secondary icon. -->
<template>
  <!-- implementation renders layered icons -->
</template>
<script setup lang="ts">
defineProps<{
  icon: string | [string, string] | { prefix: string; iconName: string };
  badgeValue?: string | number;
  overlayIcon?: string | [string, string] | { prefix: string; iconName: string };
  badgeColor?: string;
  badgePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
  fixedWidth?: boolean;
}>();
</script>

Dependencies { .dependencies }

@fortawesome/vue-fontawesome { .dependency }

Provides layered icon container utilities for stacking icons and text overlays.

vue { .dependency }

Vue runtime for rendering the component.