angular - 如何更改 ElectronJS 应用程序默认图标？

Question

我是 Electronjs 新手。我想将 Angular 应用程序转换为桌面。我可以成功实现它，但问题是应用程序图标设置为默认 Electron ，而不是我提供的图标，如下所示:

   win = new BrowserWindow({
    width: 600,
    height: 670,
    icon: `${__dirname}/dist/assets/imgs/logo.png`
  })

我使用资源黑客构建应用程序后更改了图标，但我需要的是在构建时以正确的方式更改它。我缺少什么>

Answer 1

我知道我回答这个问题迟到了，但我还是会继续。我通过艰难的方式了解到了有关应用程序图标的这些事情。我认为通过比较开发和分发阶段可以更好地理解这个主题。

开发阶段

这与通过 npm start 运行应用程序是同义的。在此阶段您永远无法替换 Electron 的默认图标 - 无论您添加什么代码。

唯一可能的是将重叠图标放在默认图标之上。但是，它可能不是您正在寻找的解决方案，因为它不是图标替换而只是覆盖。这是关于 Icon overlays 的记录内容.

OP的上述代码实际上是所谓的图标叠加的示例。

win = new BrowserWindow({
    width: 600,
    height: 670,
    icon: `${__dirname}/dist/assets/imgs/logo.png`
})

此外，图标叠加也可用于替换 notification图标。

分发阶段

这与使用以下任一分发框架同义:

• Electron 锻造
• electron-builder
• Electron package 器

为您的应用程序创建可执行文件 (.app/.exe)。正是在这个阶段，您可以实际替换 Electron 的默认图标。

例如，在 electro-packager 中，您可以指定在打包过程中要使用的图标，如下所示:

cd /path/to/app

# Mac (.icns)
npx electron-packager ./ --platform=darwin --icon=/path/to/your-custom-icon.icns

# Windows (.ico)
npx electron-packager ./ --platform=win32 --arch=x64 --icon=/path/to/your-custom-icon.ico

使用 electronics-forge 或 electro-builder 进行此操作将采用不同的方法。我还没试过。

重点是......只有在打包了您的应用程序时，您才能真正替换 Electron 的默认图标。