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?

Same problem here. Will post answer if I find it. – Steve Macdonald Dec 01 '20 at 18:21 — Steve Macdonald, Dec 01 '20 at 18:21

score 3 · Answer 1 · edited May 08 '21 at 18:17

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

resize your SVG in Sketch/Figma or other program to 22x22 / 24x24...
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
No need to use .resizable() nor .frame()

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

SwiftUI SVG in TabBar

1 Answers1