WIcon

The utility-first icon component for displaying vector icons with Tailwind-like styling. It wraps Flutter's Icon widget and applies utility classes for sizing, coloring, and animations while inheriting styles from the surrounding text context.

• Basic Usage
• Constructor
• Props
• Layout Modes
• Event Handling
• State Variants
• Styling Examples
• All Supported Classes
• Customizing Theme
• Related Documentation

WIcon(
  Icons.star,
  className: 'text-yellow-400 text-3xl',
)

Basic Usage

The WIcon widget allows you to style icons using className. By default, it inherits color and font size from the surrounding DefaultTextStyle (e.g., from a parent WDiv or WText), allowing icons to automatically match adjacent text.

WIcon(
  Icons.favorite,
  className: 'text-red-500 text-xl',
)

Constructor

const WIcon(
  IconData icon, {
  Key? key,
  String? className,
  Set? states,
  String? semanticLabel,
  TextDirection? textDirection,
})

Props

Layout Modes

While icons don't have complex layout modes, WIcon supports two primary sizing methods. Explicit sizing (w-* / h-*) takes precedence over typography-based sizing (text-*).

Sizing Modes

// Typography-based sizing (inherits line-height context)
WIcon(Icons.info, className: 'text-lg')

// Explicit dimension sizing (absolute pixels)
WIcon(Icons.info, className: 'w-12 h-12')

Event Handling

WIcon is a purely visual component. To handle user interactions, wrap it in a WAnchor or WButton. You can pass the parent's state to the states prop to trigger state-aware styling.

WAnchor(
  onTap: () => print('Settings tapped'),
  child: WIcon(
    Icons.settings,
    className: 'text-gray-400 hover:text-blue-500 transition-colors',
  ),
)

State Variants

Use state prefixes for dynamic appearance changes. This works seamlessly when the icon is part of an interactive group.

WIcon(
  Icons.check_circle,
  className: 'text-green-500 dark:text-green-400 hover:scale-110',
)

Styling Examples

Colors and Opacity

Icons support full color palette integration including opacity modifiers.

// Red icon with 50% opacity
WIcon(Icons.error, className: 'text-red-500/50')

Animations

Apply built-in animations to icons for loading states or attention-grabbing effects.

// Spinning refresh icon
WIcon(Icons.refresh, className: 'text-blue-600 animate-spin')

// Pulsing alert icon
WIcon(Icons.notifications, className: 'text-amber-500 animate-pulse')

All Supported Classes

Customizing Theme

Icons respect the global configuration in WindThemeData. Changing the fontSizes or colors scales will update all icons using those classes.

WindThemeData(
  fontSizes: {
    'xl': 20.0,
  },
  colors: {
    'brand': Colors.indigo,
  },
)

Related Documentation

• WText - Cascades typography styles to icons
• WAnchor - For making icons interactive
• WSvg - For custom vector illustrations
• WImage - For rasterized images