WSvg

WSvg(
  src: 'assets/icons/star.svg',
  className: 'fill-yellow-500 w-6 h-6 hover:scale-110 transition-transform',
)

Basic Usage#

The WSvg widget allows you to render SVG graphics and style them using utility classes. It inherits colors 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 stroke-2 w-8 h-8',
)

Constructor#

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

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 transition-colors',
  ),
)

State Variants#

Use state prefixes to change SVG styles based on interactions or environment:

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

Styling Examples#

Color Priority#

The widget applies a color filter using the following priority:

1. stroke-{color} (ideal for outlined icons)
2. fill-{color}
3. text-{color} (fallback)
4. Inherited color 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.

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 color priority chain above. For SVGs that contain multiple colors you want to keep intact (like QR codes, branded logos, or multi-color 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#

Customizing Theme#

You can define custom colors 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