如何向电子应用程序添加图标

Question

我有一个用于 win .exe 和安装程序的电子构建文件，但图标不是我的。在我的 main.js 文件中，我有附加图标的代码，但我只能让它在 createWindow 函数内工作。在函数之外，我收到一条错误消息。.exe 将运行并且我得到我的图标，但我这样做时出错；安装程序根本无法工作。我已经尝试过几个教程，但没有一个能解决这个问题。

主文件

const {app, BrowserWindow, Tray} = require('electron')
const path = require('path')
const url = require('url')

let win

function createWindow () {
  const appIcon = new Tray('icon/app.png')
  win = new BrowserWindow({ width: 1920, height: 1080, icon: 'icon/app.ico' })
  console.log(appIcon, win)
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'app/app.html'),
    protocol: 'file:',
    slashes: true
  }))
  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

包.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "MyApp",
  "private": true,
  "main": "main.js",
  "build": {
    "appID": "myapp",
    "productName": "MyApp",
    "icon": "icon/app.ico"
  },
  "scripts": {
    "start": "electron ." ,
    "package": "",
  },
  "author": "Me",
  "license": "ISC",
  "devDependencies": {
    "electron": "^1.6.1"
  }
}

我不知道该怎么做。

Answer 1

简单的解决方案

const nativeImage = require('electron').nativeImage;
    var image = nativeImage.createFromPath(__dirname + '/public/img/logo.png'); 
 // where public folder on the root dir

    image.setTemplateImage(true);


 // Create the browser window.
    win = new BrowserWindow({
        width: 1179,
        height: 754,
        backgroundColor: '#ffffff',
        transparent: false,
        icon: image
    })

Answer 2

在main.js里面

mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/icon.ico'});

如果您使用的是电子构建器，则在安装程序上

  "devDependencies": {
    "electron": "^1.4.15",
    "electron-builder": "^12.3.1"
  },

在根目录上创建一个文件夹，并在该文件夹中命名为build添加您的 icon.ico

有时你需要重新启动电子或构建应用程序2次