在 SwiftUI 中，图标（Icons）是用户界面设计的重要组成部分。SwiftUI 提供了对系统图标、多色图标以及 SF Symbols 的支持，使得开发者可以轻松地在应用中使用各种图标。

这些图标不仅可以帮助用户快速识别功能，还可以提升用户体验。以下是对这些概念及其使用方法的详细介绍。

System Icons（系统图标）

SwiftUI 中的系统图标是基于 iOS、macOS、watchOS 和 tvOS 提供的标准图标。这些图标通常是矢量格式的，具有高度的可扩展性，能够在各种分辨率下保持清晰。

使用系统图标：在 SwiftUI 中，系统图标通过 Image(systemName:) 来引用。你只需要提供 SF Symbols 中图标的名称即可使用。例如：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "star") // 星形图标
            Image(systemName: "heart.fill") // 实心心形图标
            Image(systemName: "bell") // 铃铛图标
        }
        .font(.largeTitle) // 设置图标大小
        .foregroundColor(.blue) // 设置图标颜色
    }
}

SF Symbols

SF Symbols 是由 Apple 提供的一个图标库，包含了数千个符号，支持动态调整大小、粗细和颜色。SF Symbols 是基于矢量的，因此它们在不同尺寸和设备上都能保持高质量。

使用 SF Symbols： SF Symbols 的图标名称可以直接用于 Image(systemName:)。这些图标是高度定制化的，可以与 SwiftUI 的各种修饰符结合使用。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "airplane")
                .font(.system(size: 50)) // 设置图标大小
                .foregroundColor(.green) // 设置图标颜色

            Image(systemName: "flame.fill")
                .font(.largeTitle) // 使用标准大标题大小
                .foregroundColor(.red) // 设置红色
        }
    }
}

调整 SF Symbols 的粗细和风格： SF Symbols 支持多种风格和粗细（如 regular、bold、thin、ultraLight 等）。你可以通过 .font(.system(.style)) 来设置图标的风格。

Image(systemName: "star")
    .font(.system(size: 50, weight: .bold, design: .default)) // 粗体图标

Multi-Color Icons（多色图标）

多色图标允许你在图标中使用多种颜色，而不仅仅是单一颜色。这些图标通常用于更复杂的图形表示，如地球、日历、或者其他具有多种元素的图标。

使用多色图标：多色图标同样可以通过 Image(systemName:) 使用，但需要注意的是，并不是所有 SF Symbols 都支持多色显示。

Image(systemName: "pencil.tip.crop.circle.badge.plus")
    .renderingMode(.original) // 保持原始颜色
    .font(.largeTitle)

注意：使用 .renderingMode(.original) 修饰符来保留图标的原始多色外观。

图标的自定义和组合

SwiftUI 提供了许多方式来自定义和组合图标，使它们更适合应用的设计需求。

缩放和旋转：

Image(systemName: "arrow.right.circle")
    .font(.system(size: 40))
    .rotationEffect(.degrees(45)) // 旋转45度
    .scaleEffect(1.5) // 缩放1.5倍

叠加图标：你可以通过将多个图标叠加在一起，创建更复杂的图标效果。

ZStack {
    Image(systemName: "circle.fill")
        .font(.largeTitle)
        .foregroundColor(.yellow)

    Image(systemName: "star.fill")
        .font(.title)
        .foregroundColor(.white)
}

图标的背景和边框：

Image(systemName: "heart.fill")
    .font(.system(size: 50))
    .foregroundColor(.white)
    .padding()
    .background(Color.red)
    .clipShape(Circle()) // 将图标剪裁为圆形

小结：

系统图标和SF Symbols是SwiftUI中的标准图标库，提供了大量可用的高质量图标。
多色图标支持在图标中使用多种颜色，适用于更复杂的图形表示。
通过SwiftUI的各种修饰符，你可以对图标进行调整、组合、旋转、缩放等操作，以创建自定义的视觉效果。
这些图标的使用不仅提升了应用的视觉效果，还能通过一致性和高效的表示帮助用户更好地理解和使用应用功能。

SwiftUI-认识 Icons

System Icons（系统图标）

SF Symbols

Multi-Color Icons（多色图标）

图标的自定义和组合

小结：