🔰SF Symbols

SwiftUI ⟩ control ⟩ Image ⟩ SF Symbols

👥 相關

• SF Symbols 天生就是 template image。

• used by Label.

• can be used in Text, 👉 see: Text(symbol:).

📗 參考

• Design+Code ⟩ SF Symbols 3

• Sarun ⟩

  • How to change the color of SF Symbols

  • Variable Color in SF Symbols 4

  • What is a variant in SF Symbols ⭐️ - about .symbolVariant() method.

⭐️ 重點

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

Label & SF Symbols

📘 手冊

• SwiftUI ⟩

  • Views and Controls ⟩ Label

  • View ⟩ Text and Symbol Modifiers ⟩

    • .symbolVariant()

    • .symbolRenderingMode()

  • Images ⟩

    • SymbolVariants (struct)

    • SymbolRenderingMode (struct)