Swift You and I
A blog about SwiftUI and related Apple ecosystem technologies
images layout
You Don't Need UIImage
Correct usage of the Image view
@diegolavalledev Sep 7, 2019

In SwiftUI Image view provides a way to initialize it using UIKit’s UIImage. This was used to work-around some early issues with Swift UI which prevented custom symbols to be scaled and colored.

Here’s how we display, color and scale a built-in image:

Image(systemName: "heart.circle")
  .aspectRatio(contentMode: .fit)

And here’s how we used to display a custom SVG image using UIImage as intermediary:

  Image(uiImage: UIImage(named: "heart.circle.custom")!)
    .resizable() // Dynamic sizing
    .aspectRatio(contentMode: .fit)

Except that it would not take the foreground color and the scaling would be done by resampling a bitmap producing a low resolution result.

Ways of displaying custom symbols

To work around these issue we would wrap the image in a dummy Button view, which would take care of the color. Then we would have to use a font size to scale the vector image in high resolution, like so:

Button(action: {}) { // Dummy button
  Image(uiImage: UIImage(named: "heart.circle.custom")!
        // Fixed size in points
        UIImage.SymbolConfiguration(pointSize: 100)
.foregroundColor(.red) // Color applied to button

But this still poses the problem of having to specify a static size. The solution is quite simple: avoid the use of UIImage and use the standard fixed method.

  .aspectRatio(contentMode: .fit)

Works like a charm!

See below for a result comparison of each of the methods described on this post.

For sample code featuring this and other techniques please checkout our working examples repo.