loading...
Swift You and I

You Don't Need UIImage

diegolavalle profile image Diego Lavalle Updated on ・2 min read

The 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")
  .resizable()
  .aspectRatio(contentMode: .fit)
  .foregroundColor(.red)

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)
    .foregroundColor(.red)

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

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")!
    .withConfiguration(
        // 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.

Image("heart.circle.custom")
  .resizable()
  .aspectRatio(contentMode: .fit)
  .foregroundColor(.red)

Works like a charm!

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

Ways of displaying custom symbols


Originally posted at Swift You and I

Posted on by:

diegolavalle profile

Diego Lavalle

@diegolavalle

Mad computer scientist. Builder of apps. Apple Frameworks, Web Standards, Swift, Swift UI, Advanced Javascript, React, React Native, Node.

Swift You and I

Swift You and I is a publication centered around SwiftUI, Combine and related Apple frameworks. Official app (https://swiftui.diegolavalle.com/app) with interactive examples available on the App Store.

Discussion

pic
Editor guide