SwiftUI Image View: ForegroundStyle with SF Symbol

Foreground Style modifier was introduced in iOS 15 and is fully supported by SF Symbol as well.

We can use foregroundStyle modifier to create gradient style SF symbol image.

struct ImageExample: View {
    
    var body: some View {
        HStack {
            Image(systemName: "star")
                .foregroundStyle(
                    LinearGradient(colors: [.blue.opacity(0.8), .orange.opacity(0.8)], startPoint: .top, endPoint: .bottom)
                )
Text("DevTechie")
                .bold()
            
            Image(systemName: "star")
                .symbolVariant(.fill)
                .foregroundStyle(
                    LinearGradient(colors: [.blue.opacity(0.8), .orange.opacity(0.8)], startPoint: .top, endPoint: .bottom)
                )
        }
        .font(.largeTitle)
        .foregroundColor(.orange)
    }
}

Materials with SF Sybmol

foregroundStyle modifier can also be used to apply newly introduced material style to SF Symbols as well.

For better visibility, we will use a background image, same image can be downloaded from : https://unsplash.com/photos/VN6_BUtOj3Y

struct ImageExample: View {
    
    var body: some View {
        ZStack(alignment: .bottom) {
            Image("background")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
            
            HStack {
                Image(systemName: "star")
                    .foregroundStyle(.regularMaterial)
                
                Image(systemName: "star")
                    .foregroundStyle(.thickMaterial)
                
                Image(systemName: "star")
                    .foregroundStyle(.ultraThickMaterial)
                
            }.font(.largeTitle)
                .frame(width: 200, height: 50)
                .background(.ultraThinMaterial, in: Capsule())
        }
    }
}