How do I make a circle button with an SF Symbol

To create a circle button with an SF Symbol, you can use SwiftUI, which provides a straightforward way to achieve this. Here's a simple example:

import SwiftUI

struct CircleButton: View {
    var body: some View {
        Button(action: {
            // Action for the button
        }) {
            Image(systemName: "star.fill") // Replace with your desired SF Symbol
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 24, height: 24)
                .padding()
                .background(Circle().fill(Color.blue))
                .foregroundColor(.white)
        }
    }
}

struct ContentView: View {
    var body: some View {
        CircleButton()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

In this example:

• Image(systemName: "star.fill") is used to display an SF Symbol. You can replace "star.fill" with any SF Symbol you prefer.
• .resizable() and .aspectRatio(contentMode: .fit) ensure the symbol scales correctly.
• .frame(width: 24, height: 24) sets the size of the symbol.
• .padding() adds padding around the symbol.
• .background(Circle().fill(Color.blue)) creates a circular background with a blue color.
• .foregroundColor(.white) sets the color of the symbol to white.

For more details on SF Symbols and their usage, you can refer to the session What’s new in SF Symbols 6.