Use string interpolation to show an SF Symbol in a text/paragraph

Scripting
1

Hi there,

I’m trying to create my own plugin and got an UI problem when using vanilla.

In Swift we can simply use string interpolation such as below

Text("Super star \(Image(systemName: "star"))")

or

Button(role: .destructive, action: {}) {
    Label("Remove", systemImage: "trash")
}

to insert a SF Symbol in the text. ^1

But how to use string interpolation in vanilla?

For example, if I want to insert an icon in the paragraph, or in the Button component as a label (for example, bookmark icon shown below), how to implement it?

image
image864×540 21.4 KB

Thanks.

2

This could be done (albeit very inconveniently) using NSTextAttachment and then setting an NSAttributedString manually. So you would need to use Cocoa directly (which you can do using the _nsObject property on vanilla objects).

If you just need system symbols (not custom designed symbols), then it’s probably easiest to use the SF Symbols app from Apple, pick the symbol you want, and copy it as a character (Command-C). I have no idea how stable those private symbol code points are, but I suspect they should work fine into the future.

Otherwise, if you want to use Swift and SwiftUI for your plugin, you can also use those instead of vanilla.

3

You can use the image property of NSButton:

button.setImage_(NSImage.imageWithSystemSymbolName_accessibilityDescription_("scissors.badge.ellipsis", ""))
4

Thanks for your info.

Though the ImageButton() is avaliable, but Button() class will returns that

'Button' object has no attribute 'setImage_'.
5

Thanks for your idea! Here is my method and it works for me:

  • only SF Symbol:
img = NSTextAttachment.alloc().init()
img.setImage_(NSImage.imageWithSystemSymbolName_accessibilityDescription_("square.and.arrow.up", None)) 
text = NSAttributedString.attributedStringWithAttachment_(img)
  • SF Symbol with text:
img = NSTextAttachment.alloc().init()
img.setImage_(NSImage.imageWithSystemSymbolName_accessibilityDescription_("square.and.arrow.up", None)) 
attachment = NSAttributedString.attributedStringWithAttachment_(img)
fullString = NSMutableAttributedString.alloc().init()
fullString.initWithString_("TEXT_TEXT")
fullString.insertAttributedString_atIndex_(attachment, 0)

Thank you everyone!

6

For the button, you would again need to use the _nsObject property before setting the image.