导语 SF(Sign Flag) Symbols给我们提供了非常多的可以直接应用在我们的app中作为开发资源的样式非常丰富的图标资源，这个资源库每年都在增长，不仅仅是增加了更多的图表数量，也增加了对新系统特性的支持，比如支持ios14的多色图标渲染能力和ios15的完全控制图标的各个图层。
SF符号是苹果给开发者的大礼包，尤其是那些缺少设计资源的独立开发者，他们现在也可以利用SF符号设计出漂亮的ui界面
SF Symbols
在本文中，我将向您介绍如何在您的项目中使用 SF 符号，并为 SwiftUI 和 UIKit 提供代码示例。让我们开始吧...
提示：可以下载苹果的免费 SF Symbols app 查看和管理所有可用的图标资源
如何加载SF Symbol最简单的方法就是使用符号名字来加载，这里我们使用"star"这个符号名字，如果你在使用SF Symbols app, 你可以直接用右键点击任何一个符号，在弹出的菜单中选择拷贝名字。
SwiftUI中我们用Image对象的systemName初始化方法加载一个系统符号并把它加入视图树中：
Image(systemName: "star")
UIKit中我们使用UIImage来加载，UIImageView展示：
let image = UIImage(systemName: "star")
let imageView = UIImageView(image: image)如何将SF符号嵌入文字中间
SF 符号在文本内部使用时效果很好，特别是当它们包含常见符号（如错误图标、复选标记、日历等）时。
SwiftUI中使用下面的代码实现在文本控件中插入SF符号
Label("Please try again", systemImage: "xmark.circle")
如果要将其放在文本字符串中，最好使用 Image 对象来插入文本对象中，如下所示：
Text("Please press the \(Image(systemName: "calendar")) button")
在UIKit中要实现这种效果要稍微复杂一点，需要使用NSAttributedString和NSTextAttachment配合渲染到UILabel中，如下所示代码可以将SF符号插入到文本的任意位置中：
let attachment = NSTextAttachment()
attachment.image = UIImage(systemName: "xmark.circle")
let imageString = NSMutableAttributedString(attachment: attachment)
let textString = NSAttributedString(string: "Please try again")
imageString.append(textString)
let label = UILabel()
label.attributedText = imageString
label.sizeToFit()如何改变SF符号的展示大小
SF符号使用的是矢量图技术，所以你可以随意改变图标大小而不影响显示质量。这也适用于内置的动态类型大小，其中 SF 符号将自行调整以匹配 UI 中的其他文本。
SwiftUI中，可以通过font()修饰器使用内置的文本样式来调整SF图标大小：
Image(systemName: "airplane").font(.largeTitle)
或者使用明确的字体大小来达到效果：
Image(systemName: "house").font(.system(size: 72))
而在UIKit中，我们使用UIImage扩展中的SymbolConfiguration配置来实现：
let config = UIImage.symbolConfiguration(textStyle: .largeTitle)
let image = UIImage(systemName: "airplane", withConfiguration: config)
也可以直接制定明确字体大小：
let config = UIImage.SymbolConfiguration(pointSize: 72)
let image = UIImage(systemName: "airplane", withConfiguration: config)如何正确的适配SF符号的展示缩放比例
我们刚刚了解了如果适配SF符号的大小，从而允许它们在文本内整齐地排列。但是，我们也可以将 SF 符号缩放为略小或稍大，这与它们的字体大小无关，这样我们可以更细粒度地控制它们在 UI 中的外观。
在 SwiftUI 中，您可以像这样调整 SF 符号的比例：
Image(systemName: "house").imageScale(.large)
就像前面所说，样式可以随意组合字体，可以2者兼用：
Image(systemName: "house")
.font(.largeTitle)
.imageScale(.large)
在UIKit中，直接使用scale配置来实现：
let config = UIImage.SymbolConfiguration(scale: .large)
let image = UIImage(systemName: "house", withConfiguration: config)
同样的，也可以同时使用字体和缩放控制：
let config = UIImage.SymbolConfiguration(textStyle: .largeTitle, scale: .large)
let image = UIImage(systemName: "house", withConfiguration: config)如何通过调整font weight来设置SF符号的粗体
所有的SF符号都支持所有的font weight取值范围，从ultra light(极细)到black(重粗)，这就意味着你可以随意调整SF符号的粗细来适配你的ui：
SF符号不同weight下效果
SwiftUI 中，可以通过如下代码示例来调整SF符号的weight:
Image(systemName: "keyboard")
.font(.largeTitle.weight(.black))
UIKit中，同样需要使用到UIImage.SymbolConfiguration, 这次我们要把2个SymbolConfiguration组合起来实现组合效果：
let largeTitle = UIImage.SymbolConfiguration(textStyle: .largeTitle)
let black = UIImage.SymbolConfiguration(weight: .black)
let combined = largeTitle.applying(black)
let image = UIImage(systemName: "keyboard", withConfiguration: combined)如何改变SF符号的展示颜色
SF符号默认根据您系统的配置渲染 – SwiftUI 使用默认font color，而 UIKit 使用默认的tint color。无论哪种方式，您都可以通过多种方式自定义图标的颜色。
SwiftUI中，使用foregroundColor()修饰器来自定义颜色：
Image(systemName: "doc")
.foregroundColor(.red)
UIKit中有2中方案选择，可以设置UIImageView的tint color:
let image = UIImage(systemName: "doc")
let imageView = UIImageView(image: image)
imageView.tintColor = .systemRed
或者设置UIImage实例自身的tintcolor属性也可以达到同样效果：
let image = UIImage(systemName: "doc")?.withTintColor(.systemRed, renderingMode: .alwaysOriginal)
let imageView = UIImageView(image: image)如何完美的渲染分层的SF符号
在 iOS 15 及更高版本中，许多 SF Symbol 图标都包含多个表示图标深度的图层:
编辑SF符号图层
这些图层可以通过一点透明度进行渲染，以帮助突出图标的含义。即使重新着色图像，这也有效 - 由于透明度，这只会改变颜色的阴影。
SwiftUI中可以使用如下方式渲染多层级符号:
Image(systemName: "custom.square.stack.3d.down.right.fill")
.symbolRenderingMode(.hierarchical)
.foregroundColor(.red)
UIKit中使用SymbolConfiguration来配置：
let config = UIImage.SymbolConfiguration(hierarchicalColor: .red)
let image = UIImage(systemName: "custom.square.stack.3d.down.right.fill", withConfiguration: config)
使用这种方式和普通方式来渲染多层级符号颜色效果区别：
效果对比
右为多图层渲染模式效果，因为有了透明度，可见效果更加逼真生动。
如何渲染多色SF符号在 iOS 14 及更高版本中，许多 SF 符号具有具有特定含义的内置颜色，例如"externaldrive.badge.plus"
多色模式
– 外部驱动器使用默认颜色，但加号徽章为绿色。默认情况下不启用此多色绘制模式，因此您的符号将以单色呈现，但您可以根据需要启用默认的多色模式。
在 SwiftUI 中，您可以为 iOS 15 或更高版本启用如下多色 SF 符号：
Image(systemName: "externaldrive.badge.plus")
.symbolRenderingMode(.multicolor)
iOS14:
Image(systemName: "externaldrive.badge.plus")
.renderingMode(.original)
UIKit中使用configurationPreferringMulticolor（）：
let config = UIImage.SymbolConfiguration.configurationPreferringMulticolor()
let image = UIImage(systemName: "externaldrive.badge.plus", withConfiguration: config)
提示：没有多色变体的图像将自动呈现单色，就像您没有更改设置一样。
如何创建自定义SF符号调色板在 iOS 15 及更高版本中，许多 SF 符号被划分为支持两种甚至三种颜色的段。它们的呈现方式取决于它们包含多少段以及您提供多少种颜色：
- 如果他们有1个段，它将始终使用您指定的第一种颜色;其他颜色将被忽略。
- 如果它们有 2 个段，并且您指定了 1 种颜色，则这两个段都将用于这两个段。如果指定 2 种颜色，则每个线段将使用一种颜色。如果指定 3 种颜色，则忽略第三种颜色。
- 如果它们有 3 个段，并且您指定了 1 种颜色，则将用于所有三个段。如果指定 2 种颜色，则一种颜色将用于第一个线段，另一种颜色用于其余两个段。如果指定 3 种颜色，则每个区段将使用一种颜色。
在 SwiftUI 中，您可以使用 .palette 渲染模式后跟包含一种、两种或三种颜色的前景样式来渲染调色板图像：
Image(systemName: "person.3.sequence.fill")
.symbolRenderingMode(.palette)
.foregroundStyle(.red, .green, .blue)
您实际上可以使用任何类型的 ShapeStyle，而不仅仅是颜色，这意味着您可以使用三种不同的材质：
Image(systemName: "person.3.sequence.fill")
.symbolRenderingMode(.palette)
.foregroundStyle(
.ultraThickMaterial,
.regularMaterial,
.ultraThinMaterial
)
甚至是三个线性渐变：
Image(systemName: "person.3.sequence.fill")
.symbolRenderingMode(.palette)
.foregroundStyle(
.linearGradient(colors: [.red, .black], startPoint: .top, endPoint: .bottomTrailing),
.linearGradient(colors: [.green, .black], startPoint: .top, endPoint: .bottomTrailing),
.linearGradient(colors: [.blue, .black], startPoint: .top, endPoint: .bottomTrailing)
)
.font(.largeTitle)
在 UIKit 中，这是使用另一个符号配置完成的，这次是将颜色数组传递到调色板颜色初始值设定项：
let config = UIImage.SymbolConfiguration(paletteColors: [.systemRed, .systemGreen, .systemBlue])
let image = UIImage(systemName: "person.3.sequence.fill", withConfiguration: config)
UIKit无法在其调色板中使用材质或渐变，只能使用颜色。
调色板渲染
如何调整 SF 符号变体在iOS 15及更高版本中，某些SF符号提供了各种变体，即一个或多个圆形，填充，矩形，斜杠或正方形。
一个SF符号，多种变体
在 UIKit 中，您需要按名称激活这些内容 （例如“bell.slash” ）， 但在 SwiftUI 中，有一个symbolVariant() 修饰符可以简化此操作。
UIKit: 斜杠
UIImage(systemName: "bell.slash")
SwiftUI: 斜杠
Image(systemName: "bell")
.symbolVariant(.slash)
或者多种变体组合：
Image(systemName: "bell")
.symbolVariant(.fill.slash)
还有一个 .none 选项可以呈现原始图像，如果您需要在图标的两个状态之间移动，这非常有用。例如，这会在两个状态之间切换:
struct ContentView: View {
@State private var showingAlerts = true
var body: some View {
Toggle(isOn: $showingAlerts) {
Label("Show Alerts", systemImage: "bell")
.symbolVariant(showingAlerts ? .none : .slash)
}
.toggleStyle(.button)
}
}如何描述 SF 符号的旁白(VoiceOver)
默认情况下，许多 SF 符号都有有用的 VoiceOver 标签，例如"heart"被读出作"love"(爱)，而"calendar.badge.plus"被读出为"add to calendar"(添加到日历)。但是，许多其他图标没有这样的内置名称，包括复杂的图标，例如"arrowshape.turn.up.backward.circle"。在这些情况下，您应该设置一个自定义辅助功能标签来描述 VoiceOver 的内容。
在 SwiftUI 中，您可以将自定义辅助功能标签附加到 SF 符号，如下代码所示：
Image(systemName: "arrowshape.turn.up.backward.circle")
.accessibilityLabel("Go back")
如果您使用的是标签，“旁白”将使用标签的文本，即使该文本当前未显示。
提示： 您还可以使用与 SF 符号相同的名称将辅助功能标签放入可本地化 .strings 文件中，SwiftUI 将改用该名称。
在 UIKit 中，在显示符号的控件上设置辅助功能标签，如下代码所示：
let image = UIImage(systemName: "arrowshape.turn.up.backward.circle")
let imageView = UIImageView(image: image)
imageView.accessibilityLabel = "Go back"如何使SF符号适应其上下文
在 iOS 15 及更高版本中，许多 SF 符号会自动适应它们的使用环境，包括"signature"符号更改以匹配各种本地化（如日语或希伯来语）的方式。
但是，SwiftUI 具有 UIKit 所没有的一个强大功能，即能够根据上下文呈现 SF 符号。这个能力在TabView中尤为重要，其中符号的正确变体取决于系统：根据iOS，Apple的人机界面指南建议使用填充图标，而在macOS上，则使用的是stroke画线模式。
SwiftUI 在这里做了一些聪明的事情：如果你对选项卡项使用 SF 符号，则不应指定它是否填充 - 它将根据系统自动适应。
因此，这将在iOS上使用填充的人符号创建一个选项卡项，但在macOS上使用stroke：
TabView {
Text("Your View Here")
.tabItem {
Label("Home", systemImage: "person")
.symbolVariant(.none)
}
}What's next!
SF Symbols从一出生开始就包含了大量的符号，而且每年他的符号数量和功能也在随着系统的更新不断的新增，比如ios14才支持的多色模式，ios15支持的调色板功能，如果你下载了最新版本的SF Symbols app,如果您需要在更低的ios（比如iOS12）版本支持SF符号，那么你需要从SF Symbols app中到处符号为模版svg文件，然后导入你的项目 Assets中，通过UIImage.imageNamed()即可向下兼容使用，当然请使用@available来做系统版本区分以在最新版本享用强大的SF Symbol能力。
事实上，SF Symbols已经是在应用程序中使用图像的标准方式，这表明它是多么强大，灵活和有用，希望您会发现它们适合您自己的项目！
