Masked Icon Badge

A Vue component that renders a base icon cut out by a mask icon, with optional control over the mask identifier for composition safety.

Capabilities

Applies mask to base icon

• Rendering with provided baseIcon and maskIcon outputs an SVG where the base graphic references a mask definition generated from maskIcon, with the mask reference pointing to the same id as the definition. @test

Custom mask identifier

• When maskId is provided, the rendered SVG uses that exact id for both the mask definition and the mask reference, enabling shared masks across matching instances. @test

Unique ids per instance

• When multiple component instances render without maskId, each renders with a distinct generated mask id so their masks do not collide, while preserving a stable id for the same instance across re-renders. @test

Implementation

@generates

API

export type IconInput =
  | string
  | [string, string]
  | { prefix: string; name: string };

export interface MaskedIconBadgeProps {
  /**
   * Icon to render as the visible graphic.
   */
  baseIcon: IconInput;
  /**
   * Icon used as the mask that cuts out the base icon.
   */
  maskIcon: IconInput;
  /**
   * Optional id used for the generated mask definition and reference.
   * When omitted, the component should generate a collision-free id.
   */
  maskId?: string;
  /**
   * Optional label used as an accessible title/aria description on the SVG root.
   */
  title?: string;
}

export default function MaskedIconBadge(
  props: MaskedIconBadgeProps
): any;

Dependencies { .dependencies }

@fortawesome/vue-fontawesome { .dependency }

Provides Vue bindings for rendering and masking icons.

@satisfied-by