WSvg

WAnchor(
  onTap: () {},
  child: WSvg(
    src: 'assets/icons/star.svg',
    className: 'fill-yellow-500 dark:fill-yellow-400 hover:fill-yellow-600 dark:hover:fill-yellow-300 w-6 h-6',
  ),
)

Basic Usage#

The WSvg widget allows you to render SVG graphics and style them using utility classes. It inherits colours and sizes from parent styles if not explicitly defined.

From Asset#

Use the default constructor for files located in your assets folder.

WSvg(
  src: 'assets/logo.svg',
  className: 'w-12 h-12 fill-blue-600',
)

From String#

Use the WSvg.string constructor to render raw SVG content.

WSvg.string(
  '<svg>...</svg>',
  className: 'stroke-red-500 w-8 h-8',
)

Constructor#

const WSvg({
  Key? key,
  required String? src,
  String? className,
  Set<String>? states,
  String? semanticsLabel,
})

const WSvg.string(
  String svg, {
  Key? key,
  String? className,
  Set<String>? states,
  String? semanticsLabel,
})

Props#

Layout Modes#

WSvg behaves as a fixed-size or flexible graphic depending on the classes provided.

Sizing Priority#

The widget determines its size based on the following priority:

1. w-{n} or h-{n} classes.
2. text-{size} classes (font size).
3. Inherited font size from the parent DefaultTextStyle.

WSvg(
  src: 'assets/icon.svg',
  className: 'w-10 h-10', // Explicit size
)

Event Handling#

WSvg does not handle events directly. To add interactivity, wrap it in a WAnchor or WButton.

WAnchor(
  onTap: () => print('SVG clicked'),
  child: WSvg(
    src: 'assets/icon.svg',
    className: 'hover:fill-blue-500 dark:hover:fill-blue-400 transition-colors',
  ),
)

State Variants#

The interaction prefixes (hover:, focus:, disabled:) need an ancestor that publishes state (WAnchor, WButton, WPopover); WSvg has none of its own. Custom prefixes driven by the states prop and dark: do not need one.

WAnchor(
  onTap: () {},
  child: WSvg(
    src: 'assets/icon.svg',
    className: 'fill-gray-400 hover:fill-blue-500 dark:fill-white dark:hover:fill-blue-400',
  ),
)

Styling Examples#

Color Priority#

The widget applies a colour filter using the following priority:

1. stroke-{color} (ideal for outlined icons)
2. fill-{color}
3. text-{color} (fallback)
4. Inherited colour from parent

// Applying a stroke color to an outlined SVG
WSvg(
  src: 'assets/outline-star.svg',
  className: 'stroke-amber-500',
)

Opacity and Transitions#

You can apply opacity and animate it using transition classes.

WAnchor(
  onTap: () {},
  child: WSvg(
    src: 'assets/logo.svg',
    className: 'opacity-50 hover:opacity-100 duration-300',
  ),
)

Preserving Original Colors#

By default, WSvg applies a ColorFilter based on the colour priority chain above. For SVGs that contain multiple colours you want to keep intact (like QR codes, branded logos, or multi-colour illustrations), use the preserve-colors utility class.

// Multi-color logo: keep original colors
WSvg(
  src: 'assets/logo-colored.svg',
  className: 'w-32 h-32 preserve-colors',
)

// QR code: must not be tinted
WSvg(
  src: 'assets/qr-code.svg',
  className: 'w-48 h-48 preserve-colors',
)

All Supported Classes#

WSvg does not apply animate-* classes. To animate an SVG, wrap it in a WindAnimationWrapper.

Customizing Theme#

You can define custom colours in your WindThemeData that will be available to WSvg.

WindThemeData(
  colors: {
    'brand': Colors.blue,
  },
)

Then use it as: className: 'fill-brand-500'.

Related Documentation#

• WIcon
• WImage