SF Symbols | ios.dev

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 ⭐️
}

⟩
- ⟩
- View ⟩ ⟩
- ⟩
  - (struct)
  - (struct)