SwiftUI SVG in TabBar

Question

Now that SwiftUI can use SVG images directly, I have tried to use a set of SVG files as icons for a TabBar. Using typical TabBar code:

            TabView(selection: $lastTab){
                VendorView()
                    .tabItem {
                        Image ("store")
                            .renderingMode(.template)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 25.0, height: 25.0)
                        Text("Vendor")
                }
                .tag(0)
                ...

Unfortunately this does not seem to work as the SVG image is never resized to the requested 25x25 size.

Has anyone else experienced this and if so, any workarounds?

Answer 1

The best way to handle the issue of SVGs in the TabView as an Image() is to do the following steps:

1. resize your SVG in Sketch/Figma or other program to 22x22 / 24x24...

2. Bring said resized SVG to assets and in your Inspector select:

   1. Render as: Template Image

   2. Resizing: Preserve vector data

   3. Scales: Single Scale

3. No need to use .resizable() nor .frame()

I have learnt new tips and original answer by: Mark Moeykens https://stackoverflow.com/a/37627080/15382735