https://github.com/ccnokes/electron-named-image
Native node.js addon that returns built-in macOS icons as a PNG buffer. It's cool when used with Electron's TouchBar or Menu APIs.
https://github.com/ccnokes/electron-named-image
electron macos
Last synced: 11 months ago
JSON representation
Native node.js addon that returns built-in macOS icons as a PNG buffer. It's cool when used with Electron's TouchBar or Menu APIs.
- Host: GitHub
- URL: https://github.com/ccnokes/electron-named-image
- Owner: ccnokes
- Created: 2017-05-18T04:10:00.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-04-08T03:27:49.000Z (about 8 years ago)
- Last Synced: 2025-04-25T14:43:50.101Z (about 1 year ago)
- Topics: electron, macos
- Language: JavaScript
- Homepage:
- Size: 146 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# This is deprecated because this functionality is now in Electron core.
See https://github.com/electron/electron/pull/10727
---
# electron-named-image
Native node.js addon that returns Objective-C `[NSImage imageNamed]` calls as a PNG buffer, which simplifies using default macOS images in Electron apps.
## Install
```
npm install electron-named-image
```
While macOS is currently the only supported platform, this module can be safely installed and used on non-macOS platforms. (No need to wrap your `require` in a conditional statement or other work-arounds).
## What? Why?
This lets you use default macOS images/icons with little effort. So you can set up your TouchBar to look like this:
(Note the macOS TouchBar icons in there in between the defaults)
...or your menu to look like this:
(Note the icons on the menu items)
...without having to manually gather together a bunch of image files. These images/icons are included as a part of macOS and available to Objective-C and Swift via the `NSImage` API. This module allows you to use it via Javascript.
## Sample usage:
```javascript
new TouchBarButton({
icon: nativeImage.createFromBuffer(
namedImage.getImageNamed('NSTouchBarRefreshTemplate')
)
})
```
```javascript
Menu.setApplicationMenu(Menu.buildFromTemplate([
{
label: 'My App',
submenu: [
{
label: 'Empty Trash',
icon: nativeImage.createFromBuffer(
namedImage.getImageNamed('NSTrashFull')
).resize({ width: 20 })
}
]
}
]));
```
For all possible "named images" on macOS, [see this](http://hetima.github.io/fucking_nsimage_syntax/).
If you specify an invalid named image or are using it on a macOS version that pre-dates `NSTouchBar*` icons, you'll get back an empty buffer. For example:
```javascript
namedImage.getImageNamed('invalid').length // => 0
namedImage.getImageNamed('NSTrashFull').length // => 9166
```
The empty buffer will work as expected with Electron's `nativeImage` module, you just won't have any actual image.
All of the `NSTouchBar*` named images have been outputted as PNGs to the `images` folder which you can use as well just by manually saving and importing them into your app.
## Compiling for use in an Electron app
See [https://github.com/electron/electron/blob/master/docs/tutorial/using-native-node-modules.md] for the easy, right way. Or you can also `npm install -g node-gyp` and then run the same `compile-for-electron` script I have in the package.json in the root of this module's folder.
Inspired by https://github.com/electron/electron/issues/9414