Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

WWDC21 · 15 min · SwiftUI & UI Frameworks

SF Symbols in UIKit and AppKit

Learn how you can create colorized symbols with SF Symbols 3 and customize them to match the visual design of your app’s interface. We’ll take you through the latest UIKit and AppKit APIs for integrating colorized symbols, as well as best practices for implementation. To get the most out of this session, we recommend watching “Introducing SF Symbols” from WWDC19.

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 18 snippets

Monochrome symbols swift · at 1:52 ↗ 
// Play

let playImage = UIImage(systemName: "play")

playImageView.image = playImage 
playImageView.tintColor = .systemBlue
Hierarchical symbols swift · at 3:00 ↗ 
// Device image

var image = NSImage(systemSymbolName: "ipad.landscape",
                    accessibilityDescription: "iPad")

let config = NSImage.SymbolConfiguration(hierarchicalColor: .label)

deviceView.image = image
deviceView.symbolConfiguration = config
Setup button configurations swift · at 4:13 ↗ 
// Initialize button configuration

let speakerConfig = UIButtonConfiguration.plain
speakerConfig.image = UIImage(systemName: "speaker.wave.2")

let callConfig = UIButtonConfiguration.plain
callConfig.image = UIImage(systemName: "phone")

let deleteConfig = UIButtonConfiguration.plain
deleteConfig.image = UIImage(systemName: "trash")
Image variants swift · at 4:40 ↗ 
// Button container view

actionsView.imageVariant = .none
Image variants swift · at 4:44 ↗ 
// Button container view

actionsView.imageVariant = .circle
Image variants swift · at 4:51 ↗ 
// Button container view

actionsView.imageVariant = .circle.fill
Speaker button color configuration swift · at 5:09 ↗ 
// Speaker button color configuration

let config = UIImage.SymbolConfiguration(paletteColors: [.tintColor, .systemGray2])

speakerConfig.preferredSymbolConfigurationForImage = config
speakerButton.configuration = speakerConfig
Call button color configuration swift · at 5:40 ↗ 
// Call button color configuration

let config = UIImage.SymbolConfiguration(paletteColors: [.white, .tintColor])

callConfig.preferredSymbolConfigurationForImage = config
callButton.configuration = callConfig
Delete button color configuration swift · at 5:56 ↗ 
// Delete button color configuration

let config = UIImage.SymbolConfiguration(paletteColors: [.white, .systemRed])

deleteConfig.preferredSymbolConfigurationForImage = config
deleteButton.configuration = deleteConfig
Colors matter swift · at 6:10 ↗ 
// Colors matter!

let config = UIImage.SymbolConfiguration(paletteColors: [.tintColor, .systemGray2])

let config = UIImage.SymbolConfiguration(paletteColors: [.white, .tintColor])

let config = UIImage.SymbolConfiguration(paletteColors: [.white, .systemRed])
Tint color swift · at 6:46 ↗ 
view.backgroundColor = .tintColor
label.textColor = .tintColor
searchField.tokenBackgroundColor = .tintColor
tabBarItem.badgeColor = .tintColor
Multicolor symbols swift · at 9:03 ↗ 
// configure table view cell

let image = UIImage(systemName: category.iconName)

cell.imageView.image = image
Multicolor symbols swift · at 9:13 ↗ 
// configure table view cell

let image = UIImage(systemName: category.iconName)

let config = UIImage.SymbolConfiguration.preferringMultiColor

let tintColor = category.colorForIcon

cell.imageView.image = image
cell.imageView.preferredSymbolConfiguration = config
cell.imageView.tintColor = tintColor
Multicolor symbols swift · at 9:58 ↗ 
// configure table view cell

let image = UIImage(systemName: category.iconName)

let config = UIImage.SymbolConfiguration.preferringMultiColor

let tintColor = category.colorForIcon

cell.imageView.image = image
cell.imageView.preferredSymbolConfiguration = config
cell.imageView.tintColor = tintColor
Combining configurations swift · at 12:25 ↗ 
// combined configuration

let image = UIImage(systemImage: "ipad.and.iphone")
headerView.image = image
Combining configurations swift · at 12:40 ↗ 
// Combined configuration

let image = UIImage(systemImage: "ipad.and.iphone")
headerView.image = image

let fontConfig = UIImage.SymbolConfiguration(pointSize: 60, scale: .large)
let colorConfig = UIImage.SymbolConfiguration(hierarchicalColor: .systemBlue)
let config = fontConfig.applying(colorConfig)

headerView.preferredSymbolConfiguration = config
Symbols in attributed strings swift · at 13:20 ↗ 
// Hotel amenities

let amenitiesString = NSMutableAttributedString(...)

if (room.amenities.contains(.tv)) {
    let config = UIImage.SymbolConfiguration(
                         hierarchicalColor: .systemGreen)
    let tvImage = UIImage(systemImage: "tv", 
                          withConfiguration: config)

    let attachment = NSTextAttachment(image: tvImage)
    let attachmentString = NSAttributedString(attachment: 
                                               attachment)
    let tvString = attachmentString.mutableCopy()
    tvString.append(NSAttributedString(" TV, ")

    amenitiesString.append(tvString)
}
Symbols in attributed strings swift · at 13:51 ↗ 
// hotel amenities

let amenitiesLabel = UILabel()

amenitiesLabel.textColor = .systemGreen
amenitiesLabel.font = UIFont.systemFont(ofSize: 25)

amenitiesLabel.attributedString = amenitiesString

Resources