Make it easy to use SF Symbols in macOS menu items

[nikwen]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Problem Description

In macOS Tahoe, menu items for context menus, tray icon menus, application menus, etc. can have icons next to them.

Here are Apple's design docs for the feature: https://developer.apple.com/design/human-interface-guidelines/menus#Icons

It would be great if it was possible to show SF Symbol icons there in the right size and with the right settings in one line of code.

Based on my experimentation, I can replicate the native look by saving symbols from the SF Symbols app with the following settings:

• Font: SF Pro
• Font weight: Semibold
• Rendering mode: Monochrome
• Color: Black (100%)
• Background: Default
• Point size: 13
• Symbol scale: Small

(Right-click the icon, select "Copy Image As…", then select PNG)

Then I load them using nativeImage.createFromPath(). This replicates the native look.

Proposed Solution

It would be great if there was a one-line solution to load an SF Symbol with the correct settings (see above) so that we can set it as menuItem.icon.

This work could build on #48203. It would need to extend that logic to load semibold icons.

Alternatives Considered

Alternatively, developers will need to save every image manually. This doesn't make sense.

Additional Information

CC @TheCommieAxolotl

[TheCommieAxolotl]

If you want to assign this, I would be more than happy to work on it.

We could add something like an ImageVariations object as a new parameter to the relevant NativeImage method which would allow JS-side customisation of the symbol.

[khushthecoder]

hello @jkleinsc ,Could you please assign this issue to me?