SF Symbols
Rendering Mode
Monochrome - (default mode) has a single (cusomizable) color.
Multicolor - use multiple colors in additional to your chosen color. These additional colors are NOT customizable.
Palette - customize up to 3 colors, each can have opacity or material or gradient.
Hierarchical - takes your chosen color and apply opacity variations as intended.
// 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 โญ๏ธ
}
SwiftUI โฉ
Images โฉ
SymbolVariants (struct)
SymbolRenderingMode (struct)
Last updated