Vincent Tourraine
Blog

Notes WWDC 2019 : Introducing SF Symbols

#dev #iOS #macOS

Référence : Session 206 - Introducing SF Symbols

How to create a custom symbol

  1. Export base symbol as SVG file from SF Symbols app
  2. Use editor (e.g. Sketch), keep layers hierarchy
  3. Export SVG
  4. Import SVG to Xcode in Assets Catalog

Use in code

For system symbol:

UIImage(systemName: "")

For custom symbol:

UIImage(named: "")

You can have a symbol and non-symbol image with the same name in an Assets Catalog. Useful for backward compatibility: with same code, iOS 13 loads the symbol, older iOS load the image.

Specify scale for UIImageView:

let configuration = UIImage.SymbolConfiguration(scale: .large)
imageView.preferredSymbolConfiguration = configuration

To align symbol with text: use center align, or baseline align.

Buttons

Button initializer for glyphs:

let image = UIImage(systemName: "")
let button = UIButton.system(image: image, target: self, action: #selector(action))

Similar method to set a preferred configuration:

let config = UIImage.SymbolConfiguration(textStyle: .caption, scale: .small)
button.setPreferredSymbolConfiguration(config, forState: .normal)

Text

Can embed symbol in attributed string with NSTextAttachment:

let string = NSMutableAttributedString(string: "I just symbol images!", attributes: [.foregroundColor: UIColor.label])

let heartImage = UIImage(systemName: "heart.fill")
let heartAttachment = NSTextAttachment(image: heartImage)
let heartString = NSAttributedString(attachment: heartAttachment)
string.insert(heartString, at: 7)

Image

New API to apply a tint to a UIImage

let redImage = baseImage.withTintColor(.redColor)

Tips