时间戳

首页 > 解决方案 > 电子图标

electron - 电子图标

问题描述

我在 Electron 中更改图标时遇到问题。代码工作正常，但是当我添加 <<icon: "img/icon.png">> 行时，会生成一个空白程序（没有任何内容）。这是代码：

函数创建窗口（）{

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        devTools: false
    },
    icon: "img/icon.png"
});
win.setMenu(null);
win.loadFile('index.html');
win.webContents.openDevTools();

}

标签： electronicons

解决方案

要更改窗口的图标，请将其传递给BrowserWindow构造函数并使用绝对路径进行简化

icon(NativeImage | String) (可选) - 窗口图标。在 Windows 上，建议使用 ICO 图标以获得最佳视觉效果，您也可以将其保留为未定义，以便使用可执行文件的图标。

您将需要使用一些转换器来生成.ico和.icns文件。

let icon;
switch (process.platform) {
  case 'win32': icon = path.resolve(__dirname, 'img', 'icon.ico'); break;
  case 'darwin': icon = path.resolve(__dirname, 'img', 'icon.icns'); break;
  case 'linux': icon = path.resolve(__dirname, 'img', 'icon.png'); break;
}

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        devTools: false
    },
    icon
});

此外，您可以NativeImage像这样创建：const icon = nativeImage.createFromPath(path.resolve(__dirname, 'img', 'icon.png'));

但是，您实际上不需要手动设置图标，electron 默认会使用可执行文件的图标。所以只需配置electron-packager为使用正确的图标（添加packagerConfig: { icon: img/icon } }和forge.config.js放置icon.png，icon.icns然后icon.ico进入img目录）

推荐阅读