What's new in SF Symbols
Design 入门 22m

SF Symbols 新变化

What's new in SF Symbols

2021年6月9日

在 Apple 官方观看视频

一句话判断

SF Symbols 3 新增了 600 多个图标、四种渲染模式（Monochrome/Multicolor/Hierarchical/Palette）和自定义符号的声明式配置 —— 但最实用的改进是可以在单个符号内组合多种颜色，这让设计师终于不用再为图标颜色写 hardcode 了。

这场 Session 讲了什么

SF Symbols 是苹果的矢量图标库，在 iOS 15 中更新到第三版。主要更新包括：

  1. 渲染模式（Rendering Modes）：新增了四种模式。Monochrome（单色，传统模式）、Multicolor（多色，使用苹果预定义的颜色方案）、Hierarchical（层次模式，用透明度区分前后景）、Palette（调色板模式，开发者指定每种颜色的映射）。
  2. 600+ 新图标：覆盖了更多领域（医疗、交通、天气等），总图标数超过 3000 个。
  3. 自定义符号改进：通过 SF Symbols app 导出自定义符号模板，在 Illustrator/Figma 中编辑后重新导入。支持声明式配置文件（Symbol Configuration）。
  4. SwiftUI 和 UIKit 的 API 更新：新增 SymbolRenderingMode 环境变量、支持在 Label 中直接使用渲染模式。

值得深挖的点

Palette 渲染模式的颜色映射逻辑。Palette 模式下，一个 SF Symbol 的各个图层会被编号（Layer 1, 2, 3…），你在代码中传入的颜色数组会按顺序映射到这些图层。比如 symbolVariant(.fill) 的心形图标有两层：外轮廓和内部填充。传入 [.red, .pink] 就是红色外框+粉色填充。这种设计让你可以动态更换图标配色方案而不用重新导出资源。

自定义符号的层级配置。SF Symbols 3 app 导出的自定义符号模板包含 symbol.json 配置文件，你可以声明符号的对齐方式、基线偏移和语言变体（RTL 支持）。这让自定义符号和系统符号在布局行为上完全一致，不会出现文字和图标对不齐的问题。

代码片段

使用不同的渲染模式：

import SwiftUI

struct SymbolDemo: View {
    var body: some View {
        HStack(spacing: 20) {
            // 单色模式（默认）
            Image(systemName: "externaldrive.badge.wifi")
                .symbolRenderingMode(.monochrome)
                .foregroundStyle(.blue)

            // 层次模式：用透明度区分主次
            Image(systemName: "externaldrive.badge.wifi")
                .symbolRenderingMode(.hierarchical)
                .foregroundStyle(.blue)

            // 调色板模式：自定义每层颜色
            Image(systemName: "externaldrive.badge.wifi")
                .symbolRenderingMode(.palette)
                .foregroundStyle(.blue, .red)  // 外框蓝色，WiFi 标记红色

            // 多色模式：使用苹果预定义颜色
            Image(systemName: "externaldrive.badge.wifi")
                .symbolRenderingMode(.multicolor)
        }
        .font(.system(size: 40))
    }
}

UIKit 中的渲染模式：

import UIKit

// UIKit 中使用不同的渲染模式
func configureSymbolButton() -> UIButton {
    var config = UIButton.Configuration.plain()

    // 使用 Palette 渲染模式
    let symbolConfig = UIImage.SymbolConfiguration(
        paletteColors: [.systemBlue, .systemRed]
    )
    let image = UIImage(
        systemName: "externaldrive.badge.wifi",
        withConfiguration: symbolConfig
    )
    config.image = image
    return UIButton(configuration: config)
}

自定义符号的配置：

import SwiftUI

struct CustomSymbolView: View {
    var body: some View {
        // 使用自定义符号（从 SF Symbols app 导出的）
        Image("custom.icon.weather")
            .symbolRenderingMode(.palette)
            .foregroundStyle(.yellow, .white, .gray)
            .font(.system(size: 60))

        // 结合变量值（Variable Value）实现动态效果
        // 比如 WiFi 信号强度
        Image(systemName: "wifi")
            .symbolVariableValue(0.75)  // 75% 信号强度
            .foregroundStyle(.green)
    }
}

最佳实践

  1. 优先使用 Hierarchical 模式做视觉层次。它只用一种颜色但通过透明度区分主次，比 Monochrome 丰富，比 Palette 简单，适合大多数场景。
  2. 自定义符号的画布要对齐系统符号的网格。SF Symbols app 导出的模板有严格的网格和基线参考线，不遵循的话在混排时图标会上下跳动。
  3. 使用 symbolVariant 和 symbolModifier 组合变体，不要在资源文件中存一堆几乎一样的图标。SF Symbols 支持在代码中动态组合（.fill、.slash、.circle 等）。

还有什么值得关注

  • SF Symbols 3 app 新增了动画预览功能，可以看到符号在不同渲染模式下的效果。
  • Variable Value（变量值）支持连续变化的图标，如电池电量、信号强度，可以用 0-1 的浮点数控制。
  • RTL（从右到左）语言下，某些方向性符号会自动镜像。
WWDC 2021