Icons#

Skribble renders Material icons with rough, hand-drawn outlines and optional hachure or cross-hatch fills. The icon system includes a pre-generated catalog of Material icons converted to SVG primitives, a runtime rough renderer, and helpers for custom icon sets.

WiredIcon#

The primary icon widget. Looks up the given IconData in the pre-generated rough icon catalog and renders it with hand-drawn strokes. Falls back to Flutter's standard Icon for unsupported icon families.

// Basic usage
WiredIcon(icon: Icons.home)

// With customization
WiredIcon(
  icon: Icons.favorite,
  size: 32,
  color: Colors.red,
  fillStyle: WiredIconFillStyle.hachure,
  strokeWidth: 2.0,
)

Constructor parameters#

Fill styles#

The WiredIconFillStyle enum controls how icon shapes are filled:

Notes#

• Only MaterialIcons font family icons have rough equivalents in the catalog. Other icon families (e.g., custom fonts) fall back to Icon.
• RTL text direction is handled automatically: icons with matchTextDirection are flipped horizontally.
• The drawConfig parameter allows full control over randomness, roughness, bowing, and curve fitting.
• The rough rendering uses path sampling along contours, with sampleDistance controlling fidelity.

WiredSvgIcon#

Renders a pre-parsed WiredSvgIconData with rough hand-drawn strokes. This is the lower-level rendering widget used by WiredIcon internally.

WiredSvgIcon(
  data: myCustomSvgIconData,
  size: 48,
  color: Colors.blue,
  fillStyle: WiredIconFillStyle.crossHatch,
  strokeWidth: 2.0,
)

Constructor parameters#

Notes#

• SVG data is scaled to fit the target size while maintaining aspect ratio.
• Path primitives are memoized with useMemoized for performance.
• Supports flipHorizontally for RTL icon rendering.

WiredSvgIconData#

The data type that represents a pre-parsed SVG icon. Contains the viewport dimensions and a list of drawable primitives.

const myIcon = WiredSvgIconData(
  width: 24,
  height: 24,
  primitives: [
    WiredSvgPrimitive.path('M12 2L2 22h20L12 2z'),
    WiredSvgPrimitive.circle(cx: 12, cy: 16, radius: 2),
  ],
);

Structure#

final class WiredSvgIconData {
  final double width;
  final double height;
  final List<WiredSvgPrimitive> primitives;
}

Primitive types#

Each primitive supports an optional fillRule parameter (WiredSvgFillRule.nonZero or .evenOdd).

WiredAnimatedIcon#

A hand-drawn wrapper around Flutter's AnimatedIcon. Applies Skribble theme colors while preserving the standard animation behavior.

final controller = useAnimationController(
  duration: Duration(milliseconds: 300),
);

WiredAnimatedIcon(
  icon: AnimatedIcons.menu_arrow,
  progress: controller,
  size: 24,
)

Constructor parameters#

Notes#

• Wraps the standard AnimatedIcon in buildWiredElement for repaint isolation.
• Color defaults to theme.textColor when not specified.

Rough icon generation pipeline#

Skribble includes a build-time pipeline that converts Material icons from their standard font/SVG format into the WiredSvgIconData catalog used at runtime.

Overview#

The pipeline consists of two tooling packages:

1. flutter-material kit -- Extracts SVG path data from the Material Icons font and converts each glyph into WiredSvgPrimitive entries.

2. svg-manifest kit -- Processes SVG files into the manifest format, generating Dart source files with WiredSvgIconData constants.

Generated files#

The build pipeline produces two files in packages/skribble/lib/src/generated/:

• material_rough_icons.g.dart -- A Map<int, WiredSvgIconData> keyed by icon code point, containing the SVG primitive data for every supported Material icon.

• material_rough_icon_font.g.dart -- Code point lookup tables and a custom font family constant for the rough icon font.

Using generated icon maps#

import 'package:skribble/skribble.dart';

// Look up by IconData
final data = lookupMaterialRoughIcon(Icons.home);
if (data != null) {
  // Use with WiredSvgIcon
}

// Look up by string identifier
final data2 = lookupMaterialRoughIconByIdentifier('home');

// Get the rough font family name
final fontFamily = materialRoughFontFamily;

// Get all available icon identifiers
final identifiers = materialRoughIconIdentifiers;

// Get all available code points
final codePoints = materialRoughIconCodePoints;

Icon lookup helpers#

skribble_icons package#

The skribble_icons package provides a curated set of 30 hand-drawn custom icons with a unified lookup API. It re-exports all Material rough icons from the main skribble package, giving you a single import for both custom and Material icons.

Installation#

dart pub add skribble_icons

Import#

import 'package:skribble_icons/skribble_icons.dart';

Curated custom icons#

The package includes 30 custom icons covering common UI actions:

home, search, settings, star, heart, user, menu, close, check, plus, minus, arrow_left, arrow_right, arrow_up, arrow_down, edit, delete, share, copy, mail, phone, camera, image, calendar, clock, lock, unlock, eye, eye_off, notification.

Unified lookup API#

Look up any custom icon by its string identifier:

import 'package:skribble_icons/skribble_icons.dart';

// Look up a custom icon by name
final data = lookupSkribbleIconByIdentifier('star');
if (data != null) {
  WiredSvgIcon(data: data, size: 32);
}

Available exports#

Material icons#

All Material rough icons remain available through the main skribble package. The skribble_icons package focuses on the curated custom icon set. Use WiredIcon(icon: Icons.home) for Material icons and WiredSvgIcon(data: ...) for custom icons from skribble_icons.

Custom icon sets#

The skribble_icons_custom package provides tooling for generating rough icon catalogs from your own SVG icon sets.

Workflow#

1. Place SVG files in a source directory.
2. Configure the icon set in the package's build configuration.
3. Run the generation pipeline to produce a Dart file with WiredSvgIconData constants.
4. Use the generated constants with WiredSvgIcon.

// After generating from your SVG set:
import 'package:my_app/generated/custom_icons.g.dart';

WiredSvgIcon(
  data: kCustomIcons['logo']!,
  size: 48,
  fillStyle: WiredIconFillStyle.hachure,
)

Notes#

• Custom icons go through the same SVG-to-primitive conversion as Material icons.
• The generator handles path, circle, and ellipse SVG elements.
• Fill rules (nonZero / evenOdd) are preserved from the source SVG.
• Complex SVG features (gradients, filters, masks) are not supported -- icons should be simple path-based designs.