Icon Styling Showcase

Render a Vue UI element that displays a list of icons with configurable sizing and layout options suitable for inline labels or menu entries.

Capabilities

Applies sizing, borders, and fixed width

• Icon entries with an explicit size string render using that size; entries without size use defaultSize when provided, otherwise fall back to the library default. Enabling bordered adds border styling, and enabling fixedWidth enforces equal widths for alignment across items. @test

Pull-based alignment

• Icons configured with pull: "left" or pull: "right" align accordingly relative to accompanying text while preserving the original item order. @test

Rotates icons

• Icons with rotation values of 90, 180, or 270 render rotated output while other icons remain upright. @test

Implementation

@generates

API

export type IconPull = 'left' | 'right';
export type IconRotation = 0 | 90 | 180 | 270;

export interface StyledIconConfig {
  id: string;
  icon: string | [string, string];
  size?: 'sm' | 'lg' | 'xs' | '1x' | '2x' | '3x';
  bordered?: boolean;
  fixedWidth?: boolean;
  pull?: IconPull;
  rotation?: IconRotation;
  label?: string;
}

export interface IconStyleProps {
  icons: StyledIconConfig[];
  defaultSize?: 'sm' | 'lg' | 'xs' | '1x' | '2x' | '3x';
}

export const IconStyleShowcase: unknown;

Dependencies { .dependencies }

Icon rendering library { .dependency }

Provides the icon renderer used to display SVGs with sizing, borders, fixed widths, pull alignment, and rotation controls. @satisfied-by