🔰SF Symbols
// SF Symbol
Image(systemName: "person.crop.circle.badge.plus")
.font(.system(size: 32)) // font size
.symbolRenderingMode(.palette) // symbol rendering mode ⭐️
.foregroundStyle(.red, .blue) // palette colors ⭐️
.padding()
.background(Circle().fill(.ultraThinMaterial))
.background(
Image(systemName: "hexagon")
.symbolVariant(.fill.circle) // symbol variants ⭐️
.foregroundColor(.blue)
.font(.system(size: 100))
.offset(x: -30, y: -30)
)
// Label
Label("Settings", systemImage: "gear") // label ⭐️
.imageScale(.large) // doesn't work❗️
Label("Billings", systemImage: "creditcard")
Label("Help", systemImage: "questionmark")
// HStack
HStack {
Image(systemName: "gear")
.foregroundColor(.red)
.imageScale(.large) // image scale ⭐️
Text("Setting")
.font(.subheadline.weight(.bold)) // font styles ⭐️
}
Last updated