SF Symbols 内置图标库

需求发现

我们应用要在自定义的 WKWebView 支持 Safari 打开可以跳转的 url，所以需要添加一个navigationItem 的 Safari 图标可以用来操作，这时记起来苹果自带很多图标，比如 add，search 等一系列，所以想找到 Safari 的图标，结果进一步探究引出下文。

简介

SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text for all weights and sizes. You can use SF Symbols in apps running in iOS 13 and later, watchOS 6 and later, and tvOS 13 and later.

总结为： SF Symbols 是苹果在2019年推出自 iOS 13 开始支持的一套1500+的高度可配置的符号，旨在规范和简化图标的制作和集成。

多种样式符号

symbols.gif

下载地址： https://developer.apple.com/design/downloads/SF-Symbols.dmg

当然，如果符号不符合你的要求，你也可以导出 svg 格式的模板重新编辑，然后再导入到XCode中，使用 UIImage(name: "safari")调用，默认会优先调用你自定义的 symbols 符号 (所以也要避免自定义的符号和 @2x 普通图标重名)。

export.png

使用

大家可以看到，符号的使用是 UIImage 的一个 init 方法

systemIamge.png

使用起来也很方便，只需要：

if #available(iOS 13.0, *) {
       let image = UIImage(systemName: "safari")
       ...
}

上面说到这是一款灵活可配置的符号，那么灵活在哪里呢？那么来看看下面方法：

@available(iOS 13.0, *)
    public /*not inherited*/ init?(systemName name: String, withConfiguration configuration: UIImage.Configuration?)

可以通过设置 configuration 设置一些属性，更多见 UIImage.SymbolConfiguration

let config = UIImage.SymbolConfiguration(pointSize: 30, weight: UIImage.SymbolWeight.medium)
let image = UIImage(systemName: "safari", withConfiguration: config)
...

因为 Configuration 是 UIImage 的属性，所以也可以直接对
ImageView 设置 preferredSymbolConfiguration属性:

let image = UIImage(systemName: "safari")
let imageView = UIImageView(image: image)

let config = UIImage.SymbolConfiguration(pointSize: 30, weight: UIImage.SymbolWeight.medium)
imageView.preferredSymbolConfiguration = config
...

更多详细使用见 https://developer.apple.com/documentation/uikit/uiimage/3294233-init

总结

这是苹果一次走向规范的不错尝试，之后 API 还会支持以NSTextAttachment 形式嵌入到属性字符串文本中。
但是使用的同时也存在一些问题，比如 iOS13 以下得另行适配，符号库远远不够丰富，一些符合（比如 safari）不支持导出自定义等等。
总之，期待更多的开放和支持 Do it and do better。

谢谢阅读(╹▽╹)

参考

1. SF Symbols 苹果官网文档 https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/
2. Introducing SF Symbols - WWDC 2019 https://developer.apple.com/videos/play/wwdc2019/206/
3. 解读 WWDC19 - SF Symbols 内置图标库 https://swiftcafe.io/post/sf-symbol