Add Support for Skeleton Effect on SVG Icons

[wm-jenildgohel]

I frequently use this package in my projects and have encountered an issue when applying a shimmer effect to SVG icons. Currently, there is no direct support for rendering SVG with shimmer, causing difficulties in achieving the desired visual effect.

Please consider adding native support for applying shimmer effects to SVG icons or guide how to implement this feature.

Thank you!

[mattalbr]

Adding on here from a different project, when I use Skeletonizer on a mobile device, it properly handles my VectorGraphic(AssetBytesLoader("...svg"))

But the exact same code run on web does not properly skeltonize the svg

[muhammadkamel]

@Milad-Akarie
I am also encouraging the same issue with SVG assets

[Milad-Akarie]

Custom painted widgets must be wrapped with Skeleton.shade

[mattalbr]

@Milad-Akarie Thanks for the response! Is there no way from within skeletonizer to understand that VectorGraphic needs shading?

[wm-jenildgohel]

@Milad-Akarie Thank you for your assistance; everything is now functioning properly. I suppose you have to incorporate this straight into future versions or mention it somewhere in the documentation. I had this problem in several apps, and it has already been addressed.

[dattd38]

I frequently use this package in my projects and have encountered an issue when applying a shimmer effect to SVG icons. Currently, there is no direct support for rendering SVG with shimmer, causing difficulties in achieving the desired visual effect.

Please consider adding native support for applying shimmer effects to SVG icons or guide how to implement this feature.

Thank you!
Solution: use Skeleton.replace

return Skeleton.replace(
replacement: _placeholder,
replace: true,
child: SvgPicture.asset(
widget.image ?? '',
width: widget.width ?? widget.size,
height: widget.height ?? widget.size,
fit: widget.fit,
colorFilter: widget.color != null
? ColorFilter.mode(widget.color!, BlendMode.srcIn)
: null,
placeholderBuilder: (context) => _placeholder,
),
);