SF Symbols Fill

I am using SF symbols on my TabBar but even though I use the stroke version, it inserts the fill one.

ProductsListView() 
        .tabItem {
              Image(systemName: "book")
              Text("Products")
        }

However, the image that shows up when I run the application in the book.fill

Why this could be happening?

Thx

Answered by OOPer in 695190022

Have you checked the WWDC 21 session videos about SF Symbols?

What’s new in SF Symbols

SF Symbols in SwiftUI

New this year, tab bars and other views now automatically opt into specific variants, like fill, to be applied to any symbols they contain. 

So, when you specify the base name book, the runtime of SwiftUI 3 chooses the variant fill automatically.

You may need to write something like this to disable the default variant:

            ProductsListView()
                .tabItem {
                    Image(systemName: "book")
                        .environment(\.symbolVariants, .none) //<-
                    Text("Products")
                }

I get the same wrong behaviour:

        Tab3View()
            .tabItem {
                Image(systemName: "book") // 3.circle.fill")
                Text("Tab3")
        }

gives

But in UIKit, I get:

So that feels like a bug.

Accepted Answer

Have you checked the WWDC 21 session videos about SF Symbols?

What’s new in SF Symbols

SF Symbols in SwiftUI

New this year, tab bars and other views now automatically opt into specific variants, like fill, to be applied to any symbols they contain. 

So, when you specify the base name book, the runtime of SwiftUI 3 chooses the variant fill automatically.

You may need to write something like this to disable the default variant:

            ProductsListView()
                .tabItem {
                    Image(systemName: "book")
                        .environment(\.symbolVariants, .none) //<-
                    Text("Products")
                }
SF Symbols Fill
 
 
Q