Icon not working on linux

[tomasbulva]

const aboutData = {
    icon: path.join(__dirname, 'build/icons/icon.png');,
    title: packageJson.productName,
    copyright: `Copyright ${year} ${packageJson.author.name}`,
    website: packageJson.author.url,
    text: packageJson.description,
}

click() {
    showAboutWindow(aboutData);
}

This exact code works on windows and mac but not on linux:

AppImage ( ubuntu / pop_os ) and dep package
electron 5.0.7
electron-builder 21.1.3

[sindresorhus]

Are you sure the path.join(__dirname, 'build/icons/icon.png') path is included in the built app? I'm asking as the build folder is usually used by electron-builder, but not included in the actual app.

[tomasbulva]

Yes this path exists, and the same code works in windows build and mac build (I'm not sure if this your software is being used to generate mac about window).

Here is tree from unpacked app.asar:

app
├── build
│   ├── asset-manifest.json
│   ├── env
│   ├── favicon.ico
│   ├── icons
│   │   ├── icon.ico
│   │   └── icon.png
│   ├── images
│   │   ├── gradient-check.png
│   │   ├── manage-tokens.png
│   │   ├── menu-logo.svg
│   │   ├── monster.png
│   │   └── no-transactions-arrow.png
│   ├── index.html
│   ├── js
│   │   ├── browser-window-preload.js
│   │   ├── lynx-mobile-sdk.js
│   │   └── webview-functions.js
│   ├── manifest.json
│   ├── precache-manifest.4c014bfb3e996810132fa7b5a34136f3.js
│   ├── service-worker.js
│   └── static
│       ├── css
│       │   ├── main.30b8712a.chunk.css
│       │   └── main.30b8712a.chunk.css.map
│       ├── js
│       │   ├── 2.224295a1.chunk.js
│       │   ├── 2.224295a1.chunk.js.map
│       │   ├── main.4e95a518.chunk.js
│       │   ├── main.4e95a518.chunk.js.map
│       │   ├── runtime~main.d653cc00.js
│       │   └── runtime~main.d653cc00.js.map
│       └── media
│           ├── eos-lynx-logo-desktop-splash-screen.60561078.svg
│           └── no-tokens.f9a85d50.svg
├── electron-starter.js
└── package.json

[wereii]

From my comment on this issue with Caprine:

Going thru Electron's code of that aboutPanel (for linux), it does not really seem there is any logic for reading the image from asar files, it goes straight to gdk_pixbuf_new_from_file_at_size (let's say, reading a image file:) ).

So the iconPath option in api.app.setAboutPanelOptions has to be a direct path to file.

This is icon param in electron-util's showAboutWindow.

[wereii]

One solution is to exempt the icon from being packaged into that app.asar.

Electron-builder has a build setting for that asarUnpack: ["static/Icon.png"].
This setting moves any valid files (it can be a glob: static/*.png) into app.asar.unpacked directory. All other paths to these files (if using path module, so at least path.join) are automatically resolved into that directory.

Take in mind it seems there is a lot of issues around this setting.
EDIT: As said, it's buggy, it indeed unpacks the icon into .unpacked dir but also into the asar, so the paths still resolve into, that assar. See hazardous package mentioned in the issue about problems with this option.

[mquevill]

Including asarUnpack: ["static/Icon.png"] in package.json seems to work. You can use fixPathForAsarUnpack() from this package to resolve the paths.

See how I implemented this in Caprine: https://github.com/sindresorhus/caprine/pull/1674/files