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
• Runtime-Dynamic Colors
• 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,
  Color? foregroundColor,
  String? semanticLabel,
  TextDirection? textDirection,
})

Props

Runtime-Dynamic Colors

Utility classes are for design tokens (text-primary-500, text-red-500). When the color is a runtime value, a category icon color from the database or a user-picked brand color, use the foregroundColor prop instead of interpolating into text-[#$hex].

// `category.color` is a Color loaded at runtime (e.g. from the database).

// Good: runtime-dynamic color via inline prop
WIcon(
  Icons.star,
  foregroundColor: category.color,
  className: 'text-lg',
)

// Avoid: interpolating a runtime value into className bloats the parser
// cache with one entry per unique color (`categoryHex` is a String like 'ff5500')
WIcon(Icons.star, className: 'text-lg text-[#$categoryHex]')

Precedence: inline foregroundColor wins over any text-* / dark:text-* resolved from className. When foregroundColor is null, className behavior, including the dark: fallback, is unchanged. The inline color does not participate in the parser cache key.

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