How to change filled icon to not filled on TabView tabItem in iOS 15 Xcode 13?

Question

How can i change filled icon to not filled on TabView tabItem in iOS 15 Xcode 13?

It seems now that the icons are filled by default...

My code :

import SwiftUI

struct Test_Home_V: View {
    var body: some View {
        TabView {
            HomeList_V()
                .tabItem {
                    Label("_HomeTitle", systemImage: "house")
                }
...

Note : From iOS 15 you should not explicitly request the filled variant of SF Symbols icons, because the system will automatically use them as appropriate.

So how can I get my icons (SF Symbols) in outline like before?

Thanks

Akihito

Answer 1

To solve this, we can use environment(\.symbolVariants, .none).

https://developer.apple.com/documentation/swiftui/symbolvariants/none

Using this variant with the symbolVariant(:) modifier doesn’t have any effect. Instead, to show a symbol that ignores the current variant, directly set the symbolVariants environment value to none using the environment(:_:) modifer:

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Text("content")
                .tabItem {
                    Label("tab", systemImage: "creditcard")
                }
            
            Text("content")
                .tabItem {
                    Label("tab", systemImage: "creditcard")
                        .environment(\.symbolVariants, .none) // here
                }
        }
    }
}

The result:

Exoskeleton

This is exactly what i want! Thank you Konomae! – Akihito