Create custom symbols
Design 进阶 20m

创建自定义 SF Symbols

Create custom symbols

2021年6月10日

在 Apple 官方观看视频

一句话判断

SF Symbols 3 的自定义符号模板让设计师终于可以创建和系统图标风格完美一致的专属图标——支持多色、渲染模式和 RTL 翻转。

这场 Session 讲了什么

Session 详细讲解了 SF Symbols 3 中自定义符号（Custom Symbols）的创建流程。SF Symbols 3 新增了超过 600 个符号，但更重要的是它开放了自定义符号的完整工作流。

自定义符号需要使用 Apple 提供的 SVG 模板。模板中定义了不同字重（Ultralight 到 Black）、不同尺寸（Small、Medium、Large）和对齐方式（顶部、底部、居中）的图层。设计师在模板中绘制图标，导出为特定格式的 SVG，Xcode 会自动将它注册为可用的 SF Symbol。

新特性包括：支持多色符号（Monochrome、Multicolor、Palette、Hierarchical 四种渲染模式）、支持 RTL 翻转（在从右到左的语言中自动镜像）、支持本地化变体（不同语言显示不同图标）。

值得深挖的点

四种渲染模式的 SVG 结构

每种渲染模式对应 SVG 中不同的图层结构。Monochrome 只需要一层路径。Multicolor 需要为每个颜色区域指定固定颜色。Palette 模式的每个图层对应一个调色板颜色槽。Hierarchical 需要两层——一层是主色，一层是带透明度的次色。你的自定义符号如果要支持所有渲染模式，需要在 SVG 中定义所有这些图层。这是设计工作量的主要来源。

字重对齐的精调

SF Symbols 的一个精妙设计是不同字重的符号有不同的视觉大小和笔画粗细，而且会与旁边的文本在视觉上对齐。自定义符号需要在模板中为每个字重单独绘制路径，并指定对齐参考线。如果你偷懒只画一个 Regular 字重然后缩放，在 Ultralight 和 Black 旁边看起来就会很不协调。

代码片段

使用自定义符号

// 注册自定义符号（Xcode 自动处理）
// 将 .svg 模板文件放入 Asset Catalog 的 Symbol Set 中

// 使用自定义符号
let customIcon = UIImage(systemName: "myapp.logo")
// 或者在 SwiftUI 中
Image(systemName: "myapp.logo")

// 使用不同的渲染模式
let multicolor = UIImage(systemName: "myapp.custom")?
    .withRenderingMode(.alwaysOriginal)

// SwiftUI 中指定渲染模式
Image(systemName: "myapp.custom")
    .symbolRenderingMode(.multicolor)

在 Asset Catalog 中组织自定义符号

// 1. 在 Xcode Asset Catalog 中新建 Symbol Set
// 2. 将 SVG 模板文件拖入对应的字重槽位
//    - Ultralight
//    - Thin
//    - Light
//    - Regular
//    - Medium
//    - Semibold
//    - Bold
//    - Heavy
//    - Black
// 3. 设置符号属性：
//    - Name: myapp.custom
//    - Supports RTL: Yes（如果图标有方向性）
//    - Localizations: 按需添加语言变体

符号配置和样式

// 使用 Symbol Configuration 控制大小和字重
let config = UIImage.SymbolConfiguration(
    pointSize: 20, weight: .bold
)
let icon = UIImage(systemName: "myapp.custom", withConfiguration: config)

// SwiftUI 中等效写法
Image(systemName: "myapp.custom")
    .font(.system(size: 20, weight: .bold))

// 动态大小：跟随文本字体缩放
Image(systemName: "myapp.custom")
    .imageScale(.large)  // .small / .medium / .large

最佳实践

设计流程： 使用 SF Symbols App 导出自定义符号的 SVG 模板。在设计工具（Sketch、Figma）中基于模板绘制，保持路径简洁。为所有 9 个字重绘制路径——偷懒用缩放代替会在 Bold 和 Ultralight 旁边看起来不协调。

命名规范： 自定义符号的命名遵循 namespace.name 格式（如 myapp.feature.timeline）。这避免和系统符号冲突，也方便在代码中搜索。

还有什么值得关注

  • SF Symbols 3 App 可以预览自定义符号在所有渲染模式下的效果。
  • 自定义符号自动支持 Dynamic Type——图标大小跟随用户的字体大小设置缩放。
  • 符号的 SVG 模板支持可变颜色（Variable Color），可以用 opacity 层表现”三格信号”这样的图标。
WWDC 2021