How to use svg image for tabbed page tabbar icon?

dandanhekunkun

I searched around and found that we can use third-party library to render svg in pages. But I don't know how to use svg as tabbar icon. Can anyone help me on it please?

ColeX

You can set it in custom renderer for tabbedPage.

iOS

The TabbedRenderer for iOS has an overridable GetIcon method that can be used to load tab icons from a specified source. This override makes it possible to use SVG images as icons on a TabbedPage.

Android

The TabbedPageRenderer for Android AppCompat has an overridable GetIconDrawable method that can be used to load tab icons from a custom Drawable. This override makes it possible to use SVG images as icons on a TabbedPage, and works with both top and bottom tab bars.

https://forums.xamarin.com/discussion/179611/tabbed-page-with-svg-images
https://docs.microsoft.com/en-gb/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page

ColeX

You can set it in custom renderer for tabbedPage.

iOS

The TabbedRenderer for iOS has an overridable GetIcon method that can be used to load tab icons from a specified source. This override makes it possible to use SVG images as icons on a TabbedPage.

Android

The TabbedPageRenderer for Android AppCompat has an overridable GetIconDrawable method that can be used to load tab icons from a custom Drawable. This override makes it possible to use SVG images as icons on a TabbedPage, and works with both top and bottom tab bars.

https://forums.xamarin.com/discussion/179611/tabbed-page-with-svg-images
https://docs.microsoft.com/en-gb/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page

batmaci

@ColeX thanks for this answer but is there a way to use svg in xamarin. UWP tabbed page?

ColeX

On the Universal Windows Platform (UWP), the list of tabs appears at the top of the screen, and the details area is below. Each tab consists of a title. However, icons can be added to each tab with a platform-specific. For more information, see https://docs.microsoft.com/en-gb/xamarin/xamarin-forms/platform/windows/tabbedpage-icons , try to set svg image directly on ContentPage.IconImageSource.

batmaci

@ColeX said:
On the Universal Windows Platform (UWP), the list of tabs appears at the top of the screen, and the details area is below. Each tab consists of a title. However, icons can be added to each tab with a platform-specific. For more information, see https://docs.microsoft.com/en-gb/xamarin/xamarin-forms/platform/windows/tabbedpage-icons , try to set svg image directly on ContentPage.IconImageSource.

I did that but it didnt work. It occupies the space for the svg, i can see it but svg image is not displayed. I tried with 3 different svg files and all had same behavior. I set the type "Content". Same way png is working fine.

Dinesh_Official

Hi @batmaci ,

For some reasons, I'm not sure, the given suggestion is not working in Xamarin Forms Tabbed Page. If you are still looking for an alternate solution. Please have a look on below,

For Android platform:

• Create a vector asset for your SVG and add it into your resource folder.
• Refer the asset name in your tabbed page's IconImageSource as Platform specific.

For iOS :

• Add the SVG in your resource folder.
• Use the FFSVGImage converter refer -> https://github.com/luberda-molinet/FFImageLoading/wiki/SVG-support in custom tabbed page renderer.

I've prepared the sample which may help you and others who are looking for an alternate solution to achieve this. Please refer my git repository below,

https://github.com/dinesh4official/XFPage

aaRopi_99

Thanks @Dinesh_Official ! That has been incredibly helpful, especially for Android!