Icon Transform Controller

A Vue 3 panel that renders two icons side by side, applying both string-based and object-based transforms while exposing incremental rotation and auto-width controls supplied by the icon library.

Capabilities

Renders string transforms on the primary icon

• Given a transform string like "shrink-4 right-6", the primary icon renders with that transform applied and no additional rotation. @test

Applies object transforms with incremental rotation steps

• The secondary icon combines an object-based transform with cumulative turns based on the configured rotation step (default 90 degrees) when a rotate control is triggered twice in a row. @test

Auto width toggle respects transforms

• Starting from the provided auto-width default, toggling it on removes fixed-width padding while preserving transforms on the secondary icon; toggling it off restores the default width handling. @test

Emits transform state snapshots

• After any rotation step or auto-width toggle, the component emits the latest transform state for both icons, including the current rotation count. @test

Implementation

@generates

API

export interface IconTransformPanelProps {
  primaryIcon: IconInput;
  secondaryIcon: IconInput;
  primaryTransform: string;
  secondaryTransform: TransformConfig;
  initialAutoWidth?: boolean;
  rotateStep?: number;
}

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

export interface TransformConfig {
  x?: number;
  y?: number;
  size?: number;
  rotate?: number;
  flipX?: boolean;
  flipY?: boolean;
}

export interface TransformState {
  primaryTransform: string;
  secondaryTransform: TransformConfig;
  autoWidth: boolean;
  rotationTurns: number;
}

export function mountIconTransformPanel(target: Element, props: IconTransformPanelProps): void;

Dependencies { .dependencies }

@fortawesome/vue-fontawesome { .dependency }

Vue bindings for Font Awesome icons with transform utilities and responsive width handling.