Electron: Configurando o ícone da aplicação

leonardo

No tutorial de hoje vou ensinar como podemos configurar o ícone do nosso aplicativo, e não se preocupe, é moleza.

O primeiro passo a se fazer é colocar o arquivo do seu ícone em png dentro da pasta do seu projeto e em seguida fazer as seguintes alterações no seu arquivo main.js

importe a classe Tray

const Tray = electron.Tray

dentro da função createWindow crie uma instancia de Tray informando o caminho do seu ícone

const appIcon = new Tray(__dirname+'/icone.png')

na criação da classe BrowserWindow passe como parametro tambem a propriedade icon com o caminho do icone

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

Simples né?

Se gostou dessa dica, curta e compartilhe com seus amigos 🙂

Abaixo vou deixar um exemplo completo do arquivo main.js

const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const Tray = electron.Tray
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
 const appIcon = new Tray(__dirname+'/sublime.png')
 // Create the browser window.
 mainWindow = new BrowserWindow({width: 800, height: 600, icon:__dirname+'/sublime.png'})

// and load the index.html of the app.
 mainWindow.loadURL(url.format({
 pathname: path.join(__dirname, 'index.html'),
 protocol: 'file:',
 slashes: true
 }))

// Open the DevTools.
 mainWindow.webContents.openDevTools()

// Emitted when the window is closed.
 mainWindow.on('closed', function () {
 // Dereference the window object, usually you would store windows
 // in an array if your app supports multi windows, this is the time
 // when you should delete the corresponding element.
 mainWindow = null
 })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
 // On OS X it is common for applications and their menu bar
 // to stay active until the user quits explicitly with Cmd + Q
 if (process.platform !== 'darwin') {
 app.quit()
 }
})

app.on('activate', function () {
 // On OS X it's common to re-create a window in the app when the
 // dock icon is clicked and there are no other windows open.
 if (mainWindow === null) {
 createWindow()
 }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

 

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *