# SF Symbols

[SwiftUI](https://lochiwei.gitbook.io/ios/swiftui) ⟩ [control](https://lochiwei.gitbook.io/ios/swiftui/control) ⟩ [Image](https://lochiwei.gitbook.io/ios/swiftui/control/image) ⟩ SF Symbols

{% hint style="info" %}

{% endhint %}

{% tabs %}
{% tab title="👥 相關" %}

* *<mark style="color:purple;">**SF Symbols**</mark>* 天生就是 [template-image](https://lochiwei.gitbook.io/ios/swiftui/control/image/template-image "mention")。
* used by [label](https://lochiwei.gitbook.io/ios/swiftui/control/label "mention").
* can be used in [text](https://lochiwei.gitbook.io/ios/swiftui/control/text "mention"), 👉 see: [text-symbol](https://lochiwei.gitbook.io/ios/custom/ext/text+/text-symbol "mention").
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] Design+Code ⟩ [SF Symbols 3](https://designcode.io/swiftui-ios15-sf-symbols-3)
* [ ] Sarun ⟩&#x20;
  * [ ] [How to change the color of SF Symbols](https://sarunw.com/posts/how-to-change-color-of-sf-symbols/)
  * [ ] [Variable Color in SF Symbols 4](https://sarunw.com/posts/sf-symbols-variable-color/)
  * [x] [What is a variant in SF Symbols](https://sarunw.com/posts/what-is-variant-in-sf-symbols/)  ⭐️ - about [.symbolVariant()](https://developer.apple.com/documentation/swiftui/view/symbolvariant\(_:\)) method.
    {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="info" %}

### 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.
  {% endhint %}
  {% endtab %}

{% tab title="💾 程式" %}

```swift
// 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](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2Ff9Jdii4e36LnhA0AVEO3%2FLabel%20%26%20SF%20Symbols.png?alt=media\&token=587ac5be-a6ce-43f8-9343-9f0934f7eb9a)
{% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩&#x20;
  * [Views and Controls](https://developer.apple.com/documentation/swiftui/views-and-controls) ⟩ [Label](https://developer.apple.com/documentation/swiftui/label)
  * View ⟩ [Text and Symbol Modifiers](https://developer.apple.com/documentation/swiftui/view-text-and-symbols) ⟩&#x20;
    * [.symbolVariant()](https://developer.apple.com/documentation/swiftui/view/symbolvariant\(_:\))
    * [.symbolRenderingMode()](https://developer.apple.com/documentation/swiftui/view/symbolrenderingmode\(_:\))
  * [Images ](https://developer.apple.com/documentation/swiftui/images) ⟩&#x20;
    * [SymbolVariants](https://developer.apple.com/documentation/swiftui/symbolvariants) (<mark style="color:red;">**struct**</mark>)
    * [SymbolRenderingMode](https://developer.apple.com/documentation/swiftui/symbolrenderingmode) (<mark style="color:red;">**struct**</mark>)
      {% endtab %}
      {% endtabs %}