如何在 SF 符号上应用内阴影，使其看起来如图所示？

Question

I have been trying to get this debossed effect in SwiftUI but nothing is working out. I tried shadow(color:radius:x:y:) modifier but it applies shadow on the outside of symbol. Can you please tell me if there are any other APIs or tricks to achieve this ? Thank You !

Answer 1

Love the debossed effect, reminds me of iOS 6. The key was finding inverseMask and then I had a play around and came up with this:

import SwiftUI

extension View {
    // https://www.raywenderlich.com/7589178-how-to-create-a-neumorphic-design-with-swiftui
    func inverseMask<Mask>(_ mask: Mask) -> some View where Mask: View {
        self.mask(mask
            .foregroundColor(.black)
            .background(Color.white)
            .compositingGroup()
            .luminanceToAlpha()
        )
    }
}

struct DebossTest: View {
    static var lightPurple = UIColor(red: 212/255, green: 206/255, blue: 247/255, alpha: 1)
    
    var body: some View {
        ZStack {
            Color(uiColor: DebossTest.lightPurple)
            MyButton()
                .font(.system(size: 144))
        }
    }
}


struct MyButton: View {
    
    static var darkPurple = UIColor(red: 140/255, green: 134/255, blue: 211/255, alpha: 1)
    let trashName = "trash.fill"
    
    var body: some View {
        ZStack {
            
            // the darker inset image
            Image(systemName: trashName)
                .foregroundColor(Color(uiColor: MyButton.darkPurple))
            
            // black inner shadow
            Rectangle()
                .inverseMask(Image(systemName: trashName))
                .shadow(color: Color.black, radius: 1, x: 0, y: 1)
                .mask(Image(systemName: trashName))
                .clipped()
            
            // white bottom edges
            Image(systemName: trashName)
                .shadow(color: Color.white, radius: 1, x: 0, y: 1)
                .inverseMask(Image(systemName: trashName))
        }
        .frame(width: 185, height: 140)
    }
}

struct DebossTest_Previews: PreviewProvider {
    static var previews: some View {
        DebossTest()
    }
}

Answer 2

The answer of malhal is perfect, but my approach is deferent than his approach. My codes can get updated for clipping view via an Image which normally we can do with Shape, but that is for another day, here is my way:

struct ContentView: View {
    var body: some View {
        
        Color.yellow
            .overlay(
                
                Circle()
                    .fill(Color.black)
                    .frame(width: 100, height: 100)
                    .opacity(0.1)
                    .overlay(
                        
                        ZStack {
                            
                            Circle()
                                .stroke(Color.black, lineWidth: 3)
                                .blur(radius: 5)
                            
                            ZStack {
                                
                                Image(systemName: "info")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(Color.black)
                                    .blur(radius: 5)
                                    .opacity(0.5)
                                
                                Image(systemName: "info")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(Color.yellow)
                                
                            }
                            .padding()
                            
                        }
                        
                    )
                    .clipShape(Circle())
                
            )
        
    }
}