create a circular profile icon in swiftui in swift

To create a circular profile icon in SwiftUI you can do the following:

main.swift
struct ProfileIcon: View {
    var body: some View {
        Image("profile-image")
            .resizable()
            .scaledToFill()
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.red, lineWidth: 2))
            .shadow(radius: 3)
    }
}
272 chars
11 lines

This code uses Image to load the profile image and make it resizable, and .scaledToFill() to scale it to fit the available space. Then, .clipShape(Circle()) creates a clipped circular shape, which only shows the circle portion of the image. The .overlay() modifier adds a red circle stroke around the circular image, and .shadow(radius: 3) adds a drop shadow effect.

You can use this ProfileIcon view anywhere in your code where you need a circular profile icon. For example:

main.swift
struct ContentView: View {
    var body: some View {
        VStack {
            Text("John Doe")
                .font(.headline)
            ProfileIcon()
                .frame(width: 100, height: 100)
            Text("UI Designer")
                .font(.subheadline)
        }
    }
}
292 chars
13 lines

This code creates a VStack with a Text label for the name, a ProfileIcon view, and a Text label for the job title, all centered vertically. The ProfileIcon view is given a fixed size using .frame(width: 100, height: 100) to ensure it remains circular, and is appropriately sized for the other content.