在 tabItem 中自定义 SF Symbol

Question

I am using SF Symbols to create dots for an image carousel. I would like these dots to be small and white/outline. So far, I have been able to reduce spacing between the dots. Now, all modifiers have no effect on the symbol's size.

            TabView {
                ForEach(shop.photos?[..<3] ?? [], id:\.self) { url in
                    AsyncImage(
                        url: URL(string: url),
                        content: { image in
                            image.resizable()
                                .scaledToFill()
                                .frame(width: 250, height: 250, alignment: .center)
                                .clipped()
                        },
                        placeholder: {
                            ProgressView()
                        }
                    ).tabItem {
                        Image(systemName: "circle") // Also tried with Label("", systemImage: "circle")
                            .renderingMode(.original) // None of these modifiers had any impact
                            .resizable(resizingMode: .stretch)
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 1.0, height: 1.0)
                            .font(.system(size: 100))
                    }
                }
            }.onAppear() {
                let appearance = UITabBarAppearance()

                appearance.stackedItemPositioning = .centered
                appearance.stackedItemWidth = 10

                UITabBar.appearance().standardAppearance = appearance
            }

Answer 1

You can add foreground color to change the color of the icon.

  Image(systemName: "circle") // Also tried with Label("", systemImage: "circle")
                             .renderingMode(.original) // None of these modifiers had any impact
                             .resizable(resizingMode: .stretch)
                             .aspectRatio(contentMode: .fit)
                             .frame(width: 100.0, height: 100.0)
                             .font(.system(size: 100))
                             .foregroundColor(.white)