WIcon

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 colour 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<String>? 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 colour is a runtime value, a category icon colour from the database or a user-picked brand colour, 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 behaviour, including the dark: fallback, is unchanged. The inline colour 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. WIcon has no anchor of its own, so hover: only fires when an ancestor publishes state (WAnchor, WButton, WPopover).

WAnchor(
  onTap: () {},
  child: WIcon(
    Icons.check_circle,
    className: 'text-green-500 dark:text-green-400 hover:text-green-600 dark:hover:text-green-300',
  ),
)

Styling Examples#

Colors and Opacity#

Icons support full colour 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 rasterised images