🔰SF Symbols
SwiftUI ⟩ control ⟩ Image ⟩ SF Symbols
SF Symbols 天生就是 template image。
used by Label.
can be used in Text, 👉 see: Text(symbol:).
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