Icon Lookup Diagnostics

Create a small Vue wrapper around the icon-rendering dependency that surfaces development-time diagnostics when icon or mask lookups fail. Rely on the dependency's built-in diagnostic output rather than custom error messages.

Capabilities

Renders when assets exist

• With development environment settings and registered icon/mask inputs, the wrapper renders the expected SVG content and does not emit console errors. @test

Logs missing icons in development

• In development, providing an unregistered icon value triggers a console error that mentions the missing icon identifier while leaving the icon output empty. @test

Logs missing masks in development

• In development, providing a valid icon but an unregistered mask triggers a console error that mentions the missing mask identifier while still rendering the base icon. @test

Production stays silent

• In production, missing icons or masks do not produce console errors; missing assets yield no rendered output. @test

Implementation

@generates

API

import type { DefineComponent } from "vue";

export type IconSource =
  | [string, string]
  | { prefix: string; iconName: string }
  | string;

export interface DiagnosticIconProps {
  icon: IconSource;
  mask?: IconSource;
  label?: string;
  env?: "development" | "production";
}

export const DiagnosticIcon: DefineComponent<DiagnosticIconProps>;

Dependencies { .dependencies }

@fortawesome/vue-fontawesome { .dependency }

Vue bindings for Font Awesome icons and masks that log missing asset lookups during development.