Search code examples
swiftuiuiimage

SwiftUI: SF Symbol distortion when using `Image` directly vs via `UIImage`

With the following SwiftUI code

import SwiftUI

struct ContentView: View {
  var body: some View {
    HStack {
      VStack {
        Text("Proportional")
        Image(systemName: "bookmark")
      }

      VStack {
        Text("Skewed")
        Image(uiImage: UIImage(systemName: "bookmark")!)
      }
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

The image that is instantiated directly with Image(systemName:) is rendered correctly, while the one instantiated with Image(uiImage:) is stretched horizontally, as seen here

attached image.

Is there a view modifier that I could use that would fix this? I've already tried various permutations of .aspectRatio(), .resizable(), .scaledToFit(), etc. to no avail.

Solution

  • I suspect that this is a bug with current SwiftUI that has been fixed in Xcode 15 beta that was released at WWCD '23, because the behavior is no longer manifesting itself in the beta version of Xcode.