Search code examples
swiftimageswiftuitextnsattributedstring

How to resize an in-line image within Text in SwiftUI?

I want to resize an in-line image that I added to a multi-line Text. How do I resize Image(systemName: "chevron.right") to be smaller? So far I tried adding .resizable(capInsets:) to the Image, but that didn't seem to have an effect.

This is what it looks like currently:

enter image description here

Ideally I would like the chevron image to look smaller like this:

enter image description here

let subtitle = Text("This is an example of a long sentence that is long, has multiple lines, and is also referred to as a sentence with several words."
  .foregroundColor(.black)
return subtitle +
Text(" Learn more ")
  .foregroundColor(.green)
  .bold() +
Text(Image(systemName: "chevron.right").resizable(capInsets: EdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)))
  .foregroundColor(.green)
  .bold()
Solution

  • Use the font modifier and pass a smaller font size to make the symbol smaller.

    Text(Image(systemName: "chevron.right"))
  .foregroundColor(.green)
  .font(.system(size: 10))
  .bold()

    This will cause the symbol to appear at a rather low position, since the texts align at baselines, rather than centre. You can use baselineOffset as suggested here to move it up a little:

    Text(Image(systemName: "chevron.right"))
  .foregroundColor(.green)
  .font(.system(size: 10))
  .bold()
  .baselineOffset(3)

    Example output:

    enter image description here