SwiftUI Label のカスタムアイコン

Label は SF Symbols だけでなく、独自の画像やカスタムビューをアイコンとして使うこともできます。ブランドロゴやアプリ独自のアイコンを表示したい場合に便利です。

Asset Catalog の画像を使う

image: 引数で Asset Catalog の画像名を指定します。

Label("マイアプリ", image: "custom-icon")

Image を直接指定する

icon: クロージャを使うと、任意の Image を渡せます。

Label {
    Text("プロフィール")
} icon: {
    Image("avatar")
        .resizable()
        .frame(width: 24, height: 24)
        .clipShape(Circle())
}

カスタムビューをアイコンにする

Image に限らず、任意のビューをアイコンとして使えます。

Label {
    Text("ステータス")
} icon: {
    Circle()
        .fill(.green)
        .frame(width: 12, height: 12)
}

複雑なビューも可能です。

Label {
    Text("通知")
} icon: {
    ZStack {
        Image(systemName: "bell.fill")
        
        Circle()
            .fill(.red)
            .frame(width: 8, height: 8)
            .offset(x: 6, y: -6)
    }
}

テキスト側もカスタマイズ

タイトル部分も Text 以外のビューにできます。

Label {
    VStack(alignment: .leading) {
        Text("メインタイトル")
            .font(.headline)
        Text("サブタイトル")
            .font(.caption)
            .foregroundStyle(.secondary)
    }
} icon: {
    Image(systemName: "folder.fill")
        .foregroundStyle(.blue)
}

サイズの調整

カスタムアイコンは SF Symbols と違い、自動でサイズが調整されないことがあります。明示的にサイズを指定するとよいでしょう。

Label {
    Text("ユーザー")
} icon: {
    Image("user-avatar")
        .resizable()
        .scaledToFit()
        .frame(width: 20, height: 20)
}

カスタムアイコンを使うことで、Label の柔軟性がさらに広がります。