Add support for SVG nativeImage

[stewartlord]

• Electron version: 1.6.10
• Operating system: elementary OS 0.4.1 Loki

Expected behavior

It should be possible to set a tray image in SVG format. This would allow tray icons to adapt to the current theme (ie. appear white on black, or black on white).

Actual behavior

The image must be supplied as a PNG or a JPG and therefore does not adapt to the platform's theme.

How to reproduce

new Tray('/path/to/image.png');

[bilelmoussaoui]

I've reported the same issue here few days after you (without knowing about yours) with some extra info for devs #9642

[neauoire]

I would love this.

[deadcoder0904]

Any support on this❓

Its been a year. Is it hard to implement❓

[wget]

@deadcoder0904 Hi there. I have been looking for this yesterday and it appears the StatusIcon is a deprecated function of GTK (since 3.14). We now need to use GNotification + Dbus (on linux). The code handling the status icon is managed by Chromium itself. So if you wants this to be fixed we will need to find a way to fix the GTK StatusIcon on chromium directly.
More info on this will be posted on the aforementionned mattermost/desktop issue.

[shehi]

Any updates on this one?

[mkramb]

FYI, a workaround that works nicely is to dynamically convert image using sharp library:

const trayIcon = Buffer.from(`
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
  </svg>
`);

const icon = await sharp(trayIcon).png().resize(16, 16).toBuffer();
tray.setImage(nativeImage.createFromBuffer(icon));

https://www.npmjs.com/package/sharp

[iyosayi0x]

FYI, a workaround that works nicely is to dynamically convert image using sharp library:

const trayIcon = Buffer.from(`
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
  </svg>
`);

const icon = await sharp(trayIcon).png().resize(16, 16).toBuffer();
tray.setImage(nativeImage.createFromBuffer(icon));

https://www.npmjs.com/package/sharp

Been looking for a work around , thanks i'll try it out.

[andirsun]

https://github.com/yisibl/resvg-js Is much better library than sharp, also support m1 macs.

Running "resize width" suite...
  resvg-js(Rust):
    12 ops/s, ±22.66%   | fastest 🚀

  sharp:
    9 ops/s, ±64.52%    | 25% slower

  skr-canvas(Rust):
    7 ops/s, ±3.72%    | 41.67% slower

  svg2img(canvg and node-canvas):
    6 ops/s, ±16.94%    | slowest, 50% slower

[eexit]

Hello, it does work as a workaround, but how do you leverage the Template Image mode with this?

Thanks!