包含常用 App icon 的 SF Symbol

從 iOS 13 開始，Apple 提供幫助我們開發 iOS App 的 SF Symbol。(SF 是 San Francisco 的縮寫，是舊金山的意思）

SF Symbols - Apple Developer

SF Symbol 包含五花八門的圖案， iOS App 時常使用的圖案它都幫我們設計好了，比方垃圾桶，鈴鐺，郵件，月曆，頭像等。有了這些 Apple 精心設計的 icon，我們再也沒有做不出精美 App 的藉口，接下來就讓我們一步步認識和使用 SF Symbol 吧。

下載 SF Symbols App

iOS 內建 SF Symbols，因此不一定要安裝 SF Symbols App。不過為了方便查詢有哪些可用的 SF Symbol，建議先從以下網站下載 & 安裝 Mac 版的 SF Symbols 6 App。

SF Symbols - Apple Developer

執行 SF Symbols App

查詢 SF Symbols 玲琅滿目的圖案。

從上方的三個按鈕可切換 symbol 清單的顯示方式，有 grid，list & gallery 三種。

從 Symbol Library 加入 SF Symbol

從 Symbol Library 加入 SF Symbol — Xcode 14 新功能

設定 SF Symbol 的樣式

以下分別說明 SwiftUI & interface builder 兩種範例。

• SwiftUI 範例

建立 Image 時，搭配參數 systemName，利用 foregroundStyle 控制顏色。

struct ContentView: View {
    var body: some View {
        Image(systemName: "paperplane")
            .resizable()
            .scaledToFit()
            .frame(width: 100, height: 100)
            .foregroundStyle(.purple)
    }
}

• interface builder 範例

從 Image 欄位選擇圖片名稱。

利用 Tint 控制顏色。

調整 button SF Symbol 圖片的大小

調整 button SF Symbol 圖片的大小

調整粗細

以下分別說明 SwiftUI & interface builder 兩種範例。

• SwiftUI 範例

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "paperplane")
                .font(.system(size: 100, weight: .ultraLight))
            
            Image(systemName: "paperplane")
                .font(.system(size: 100, weight: .black))
        }
        .foregroundStyle(.purple)
   }
}

• interface builder 範例

設定 Symbol Configuration 下的 Weight。

超級細的 Ultra Light & 超級粗的 Black。

SF Symbol 3 四種客製顏色的 rendering mode(配色模式）

從 iOS 15 的 SF Symbol 3 開始，SF Symbol 提供了 Monochrome(單色) ，Multicolor，Hierarchical(分層) & Palette(調色) 四種配色的方法，有興趣的朋友可參考以下連結。

SF Symbol 3 四種客製顏色的 rendering mode(配色模式）

使用 chevron SF Symbol 實現 App 常見的 V 形圖案

使用 chevron SF Symbol 實現 App 常見的 V 形圖案