# 206-Introducing SF Symbols

# UIImage

# Create

// 创建 system symbol image
init?(systemName name: String)
init?(systemName name: String, withConfiguration configuration: UIImage.Configuration?)
init?(systemName name: String, compatibleWith traitCollection: UITraitCollection?)

// 对于自定义的 symbol image，可以与普通图片同名，但是优先自定义的 symbol image
init?(named name: String)

1
2
3
4
5
6
7

# Baseline

// symbol image 的 baseline, 用于 baseline 对齐
// The offset to the baseline from the bottom of the image
// symbol image 默认有 baseline, 但是其它的图片没有
var baselineOffsetFromBottom: CGFloat? { get }

// 给 image 添加 baseline
func withBaselineOffset(fromBottom baselineOffset: CGFloat) -> UIImage

// 取消 baseline
func imageWithoutBaseline() -> UIImage

1
2
3
4
5
6
7
8
9
10

# Rendering Mode

默认值

// non-symbol image
.renderingMode = .automatic

// symbol image
.renderingMode = .alwaysTemplate

1
2
3
4
5

# Tint Color

func withTintColor(_ color: UIColor) -> UIImage
func withTintColor(_ color: UIColor, renderingMode: UIImage.RenderingMode) -> UIImage

1
2

# UIImage.SymbolConfiguration

enum SymbolScale : Int {
  case `default`
  case unspecified
  case small
  case medium // 默认
  case large
}

enum SymbolWeight : Int {
  case unspecified
  case ultraLight
  case thin
  case light
  case regular // 默认
  case medium
  case semibold
  case bold
  case heavy
  case black
}

// fontSize 默认是17

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# UIImageView

// 确定 symbol image configuration
// 如果 image 没有 SymbolConfiguration， 把这个应用的 image 上，效果等同于 
// UIImage.init(systemName name: String, withConfiguration configuration: UIImage.Configuration?)
// 如果 image 有 SymbolConfiguration，image 的 SymbolConfiguration 相关属性 (fontSize, weight, scale) 优先级高
var preferredSymbolConfiguration: UIImage.SymbolConfiguration? { get set }

1
2
3
4
5

# UIButton

// system button
// system button have a default configuration of a body text style and a large scale
// image 必须是 symbol image？
class func systemButton(with image: UIImage, target: Any?, action: Selector?) -> Self

// symbol configuration
// regular button have a default configuration of a medium scale
var currentPreferredSymbolConfiguration: UIImage.SymbolConfiguration? { get }

func preferredSymbolConfigurationForImage(in state: UIControl.State) -> UIImage.SymbolConfiguration?

func setPreferredSymbolConfiguration(_ configuration: UIImage.SymbolConfiguration?, forImageIn state: UIControl.State)

1
2
3
4
5
6
7
8
9
10
11
12

# NSTextAttachment

// symbol image is a bit smarter than the regular one.
// It will actually inspect the string around the symbol to complete the configuration of that symbol.
// It will look at the font size, font weight, color, and then the completed image will be drawn.
init(image: UIImage)

1
2
3
4