Hi Everyone. Can you help me with my settings icon design. I'm trying to create a circular settings button using Menu. My code here:
struct MenuView: View {
var body: some View {
Menu {
Text("Hello")
Text("How are you")
} label: {
Image(systemName: "gearshape.fill")
.clipShape(Circle())
}
.clipShape(Circle())
.padding(.top, 10)
.padding(.leading, 20)
}
}
You can see my try, this one looks wrong.
It should be like this:
Just Circle with setting image inside. Thank you an advance 😭🙏🛐
Thanks for the post. Great question as there are so many ways to accomplish this and probably better than the code I had for an icon. SwiftUI developers please feel free to jump info this thread and provide a simple solution to this problem.
Label(title: {}) {
Image(systemName: "gearshape.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 44, height: 44)
.foregroundColor(.white)
.background(
Circle()
.fill(Color.blue.opacity(0.8))
.overlay {
Circle()
.stroke(Color.white, lineWidth: 2)
}
)
}
The icon maintains perfect circular shape with consistent padding and size. Added subtle background and outline for better visibility.
Albert Pascual Worldwide Developer Relations.
