How Do I Fade the Top or Bottom Edge of a SF Symbol in SwiftUI?

Question

I'm trying to recreate a visual, that consist of 3 SF Symbols. The image in the middle is 100% solid no fade. I would like to fade top edge of the top most image and fade the bottom edge of the bottom most image.

I am using SF Symbols.

I would like to reproduce the following:

(fade top of image)

IMAGE

IMAGE

IMAGE

(fade bottom of image)

How would I accomplish this?

Answer 1

Here is my alternate (without UIKit usage)

struct TestSFSymbolsFade: View {
    var body: some View {
        VStack {
            Image(systemName: "ant.fill").resizable()
            Image(systemName: "ant.fill").resizable()
            Image(systemName: "ant.fill").resizable()
        }
        .mask(LinearGradient(gradient: Gradient(stops: [
            .init(color: .clear, location: 0),
            .init(color: .black, location: 0.25),
            .init(color: .black, location: 0.75),
            .init(color: .clear, location: 1)
        ]), startPoint: .top, endPoint: .bottom))
        .frame(width: 40, height: 160) // < just for demo, can be any or absent
    }
}