FIcons class final

The icon tokens used by Forui's widgets. Defaults to icons in FLucideIcons.

Customizing icons

To change the icons used by Forui widgets, pass a FIcons to FThemeData.

Icons in FIcons should inherit their properties from the ambient IconTheme. Packages that represent icons as IconData inherit automatically; use FIcon.new to wrap them.

For example, to use the in-built Material icons:

FThemeData(
  colors: FColors.neutralLight,
  touch: false,
  icons: FIcons(
    arrowLeft: FIcon(Icons.arrow_left),
    calendar: FIcon(Icons.calendar_month),
    check: FIcon(Icons.check),
    // ...
  ),
);

Packages with duotone or multi-color glyphs typically expose a custom icon widget instead. Implement FIcon to use them, taking care to follow FIcon's contract:

class AwesomeIcon implements FIcon {
  final IconDataBrands data;

  const AwesomeIcon(this.data);

  @override
  Widget call(BuildContext context, {String? semanticsLabel}) =>
      FaIcon(data, semanticLabel: semanticsLabel);

  @override
  bool operator ==(Object other) => identical(this, other) || other is AwesomeIcon && data == other.data;

  @override
  int get hashCode => data.hashCode;
}

Known-compatible packages:

• font_awesome_flutter
• hugeicons

Icons that do not inherit from the ambient IconTheme (e.g. SVG-based packages) must read the data themselves. Wrap the widget in a Builder so IconTheme.of is evaluated inside the caller's wrap:

class SvgIcon implements FIcon {
  final String asset;

  const SvgIcon(this.asset);

  @override
  Widget call(BuildContext _, {String? semanticsLabel}) => Builder(
    builder: (context) {
      final data = IconTheme.of(context);
      return SvgPicture.asset(
        asset,
        width: data.size,
        height: data.size,
        colorFilter: data.color == null ? null : ColorFilter.mode(data.color!, BlendMode.srcIn),
        semanticsLabel: semanticsLabel,
      );
    },
  );

  @override
  bool operator ==(Object other) => identical(this, other) || other is SvgIcon && asset == other.asset;

  @override
  int get hashCode => asset.hashCode;
}

Run dart run forui theme create to generate a custom theme.