How to render images using SF Symbols
Updated for Xcode 12.0
SwiftUI’s Image view lets us load any of the 2000+ icons from SF Symbols, with many of them working in multi-color too.
To load icons from Apple’s SF Symbols set, use the Image(systemName:) initializer, passing in the icon string to load, like this:
Image(systemName: "cloud.heavyrain.fill")The image you get back is scalable and colorable, which means you can tint the image using the same foregroundColor() modifier you’ve already seen:
Image(systemName: "cloud.heavyrain.fill")
.foregroundColor(.red)And it also means you can ask SwiftUI to scale up the image to match whatever Dynamic Type text style it accompanies, if any:
Image(systemName: "cloud.heavyrain.fill")
.font(.largeTitle)If you’re using an image that has color elements, you can activate multi-color mode using .renderingMode(.original), like this:
Image(systemName: "cloud.sun.rain.fill")
.renderingMode(.original)
.font(.largeTitle)
.padding()
.background(Color.black)
.clipShape(Circle())
SPONSORED Announcing NSSpain 2020: Remote Edition! An online, continuous conference for iOS developers. We’ll start on Thursday and finish on Friday, with talks, activities, and lots of fun for 36 hours, non-stop. Sound good? Join us!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
