Marco Arment

Little SwiftUI trick I found somewhere on the internet that everyone should know:

You can put SF Symbols perfectly inline with Text by… creating a Text with the symbol Image (?) and then adding the Texts together (!).

The subhead here is:

(
Text(Image(systemName: "cloud”)) .accessibilityLabel(“Streamable, ”) +
Text(" ") +
Text(dateStr)
)

A handy utility function to generate these: https://gist.github.com/marcoarment/fdd9c19995e8f9d16bc2d10cd8cefe39

SwiftUI Text with inline SF Symbols

SwiftUI Text with inline SF Symbols. GitHub Gist: instantly share code, notes, and snippets.

Gist
Jul 10, 2023 at 12:56pmIvory for Mac
Show threadsam henri goldJul 10, 2023
@marcoarment this feels like it should be illegal
Show threadD. Griffin JonesJul 10, 2023
@samhenrigold @marcoarment You can even go one more level of cursed and do that inside a Picker! Every item will have an icon. I’m using that for a project that may or may not ever see the light of day.
Show threadDougJul 10, 2023
@marcoarment I think you can interpolate it too so you might be able to do it without the additional Text(“ “).
Show threadBrandon HorstJul 10, 2023
@marcoarment is this better than using Label?
Show threadGernotJul 10, 2023
@brandonhorst @marcoarment Depends on what you want to achieve. I would totally prefer Label in most cases as you can apply a LabelStyle.
Show threadGernotJul 10, 2023
@brandonhorst @marcoarment Or in the case depicted in the Screenshot maybe even LabeledContent and a LabeledContentStyle (maybe with an internal LabelStyle). The would keep it semantically independent and you could throw the same view somewhere else like a List Cell or a GroupBox and it would just adjust.
Show threadRoman LefebvreJul 10, 2023
@brandonhorst @marcoarment In this particular case, I'm not sure but that approach also extends to putting your SF Symbol at the end of the Text or even in the middle of it.
Show threadChris WagnerJul 11, 2023
@brandonhorst @marcoarment for this type of situation it is. Text on both sides. It also works seamlessly with dynamic type.
Show threadGernotJul 10, 2023
@marcoarment Works only with the built-in symbols though, as they are fonts internally. I think it does not work with custom SF symbols. (Note: This might have changed, It’s been a while since I tried)
Show threadgormsterJul 11, 2023
@gernot pretty sure custom symbols end up as fonts too? Or at least they are rendered by the text system.
Show threadChris WagnerJul 11, 2023
@gernot @marcoarment it does and multicolor are fixed in 17!
Show threadChris WagnerJul 11, 2023
@gernot @marcoarment another example
Show threadBrandonJul 10, 2023
@natpanferova

I would love to know your thoughts on this!
Show threadJimmy WilsonJul 10, 2023
@marcoarment nice! Does the date get read aloud twice when using voice over or is iOS recognizing it’s the same value?
Show threadMarco ArmentJul 10, 2023
@jimmynotjim Oops, good catch. My function in the Gist is correct, but the example in the post was not. Fixed.
Show threadScottJul 10, 2023
@marcoarment @jimmynotjim does that format the date according to the system date format, too?
Show threadChris EidhofJul 10, 2023
@marcoarment yes! You should also be able to create an HStack that’s baseline aligned. Adding the images to the text makes them part of the text layout algorithm, which is cool.
Show threadChris EidhofJul 10, 2023
@marcoarment also, instead of the + operator you can also do string interpolation. You could probably even do an interpolation overload for this.
Show threadEmilio PeláezJul 10, 2023
@marcoarment that’s pretty handy but wouldn’t the order of the prefix symbols be reversed relative to their order in the array?
Show threadMarco ArmentJul 10, 2023
@emiliopelaez Good catch. Yes! Fixed gist.
Show threadKarl BaronJul 10, 2023
@marcoarment TIL you can add Texts together
Show threadRyan LintottJul 10, 2023

@marcoarment Nice! I found I was joining Text a lot so I made Text.joined(separator:) which really helped.

https://gist.github.com/ryanlintott/66b58972d8d05be83c9379bf35efeabb

An extension to Text that allows you to join an array of Text into a single Text with optional separators.

An extension to Text that allows you to join an array of Text into a single Text with optional separators. - Text+joined.swift

Gist
Show threadMatthew LoewenJul 10, 2023
@marcoarment another thing I love that your .accessibilityLabel shows is that you can add all the usual Text modifiers such as .font to each of those individually. A handy way around using AttributedString in certain use cases.
Show threadNico ReeseJul 10, 2023
@marcoarment isn‘t that what Label does as well?
Show threadFilip NěmečekJul 10, 2023

@marcoarment

I am hesitant to do this ever since this kind of code was crashing my widgets...

I was getting this error: CodableTextAttachment.Error.invalidAttachment - The operation couldn’t be completed.

Blog post if anyone is interested in more details https://nemecek.be/blog/186/the-weirdest-bugcrash-in-widgets

The weirdest bug/crash in widgets?

Mysterious crash and ChatGPT to the rescue.

Show threadChris WagnerJul 11, 2023
@marcoarment if you get to the point of trying this with custom multicolor symbols you will find it doesn’t work. But it’s fixed in 17!