Cara mengatur ikon aplikasi untuk Aplikasi Elektron / Atom Shell

147

Bagaimana Anda mengatur ikon aplikasi untuk aplikasi Electron Anda?

Saya mencoba BrowserWindow({icon:'path/to/image.png'});tetapi tidak berhasil.

Apakah saya perlu mengemas aplikasi untuk melihat efeknya?

icons electron Jo E.
sumber
Anda dapat mengikuti github.com/onmyway133/blog/issues/66
onmyway133
Satu hal yang dapat Anda lakukan untuk Mac adalah meletakkan postinstallskrip di proyek Anda yang akan menyalin file .icns di tempatnya di bawah node_modules / secara otomatis.
theram

Jawaban:

164

Mengatur iconproperti saat membuat BrowserWindowhanya berpengaruh pada Windows dan Linux.

Untuk mengatur ikon pada OS X, Anda dapat menggunakan paket-elektron dan mengatur ikon menggunakan --iconsakelar.

Ini harus dalam format .icns untuk OS X. Ada ikon konverter online yang dapat membuat file ini dari .png Anda.

Alex Warren
sumber
5
Mengatur ikon pada BrowserWindow ke file .PNG akan ditampilkan di taskbar di windows. Contohnya berfungsi dapat ditemukan di blog saya di sini: mylifeforthecode.com/... Mungkin path harus mutlak untuk bekerja ketika saya mengaturnya ke __dirname + 'path / to / icon.png'. Namun, untuk mengatur ikon untuk .exe, Anda harus menggunakan peretas paket-elektron ATAU peretas sumber daya.
Shawn Rakowski
Bisakah Anda memperbaiki jawaban ini menjadi Windows yang akurat?
Ana Betts
Terima kasih @ShawnRakowski, Anda benar - Saya baru saja menguji ini dan properti ikon memang berfungsi pada Windows juga. Saya telah memperbarui jawaban saya untuk mencerminkan ini.
Alex Warren
1
Ini bekerja pada awalnya, tetapi kemudian saya mengirim aplikasi yang dapat didistribusikan ke teman saya dan itu tidak berhasil! Ada ide?
Chet
10
@Nick, Anda harus melakukan sesuatu seperti berikutelectron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
Mateo
47

Di bawah ini adalah solusi yang saya miliki:

mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});
Sh4m
sumber
18
Layak disebutkan bahwa __dirname adalah path dari folder / src / Anda (yaitu folder file app.js / main.js Anda).
Konstantin
.icnstidak dibutuhkan ?
ishandutta2007
20

Anda dapat melakukannya untuk macOS juga. Oke, tidak melalui kode, tetapi dengan beberapa langkah sederhana:

  1. Temukan file .icns yang ingin Anda gunakan, buka dan salin melalui menu Edit
  2. Temukan electron.app, biasanya dalam node_modules / electron / dist
  3. Buka jendela informasi
  4. Pilih ikon di sudut kiri atas (perbatasan abu-abu di sekitarnya)
  5. Tempel ikon melalui cmd + v
  6. Nikmati ikon Anda selama pengembangan :-)

masukkan deskripsi gambar di sini

Sebenarnya itu adalah hal umum yang tidak spesifik untuk elektron. Anda dapat mengubah ikon banyak aplikasi macOS seperti ini.

alexrjs
sumber
6
Ini luar biasa, terima kasih untuk ini. Saya memang perlu drag and drop untuk membuatnya bekerja tetapi tetap luar biasa.
Robert Masen
Instruksi lengkap: support.apple.com/kb/PH25383?locale=en_US
AndroidDev
Ini sepertinya hanya bekerja untuk pengembangan. Ketika saya menjalankan 'yarn dist', file icns akan diganti dengan yang asli elektron.
Dave
2
@Dave Sebenarnya dia berkata6. Enjoy your icon during *development* :-)
Mia
Baiklah kawan ... Saya tahu ... Tapi perbaikan ini sudah lebih dari 2 tahun ... ;-) Dan btw. Anda harus dapat menggunakan "retasan" ini juga pada build final, karena Anda cukup mengubahnya pada aplikasi dist ... Belum mencoba untuk sementara waktu .. Dan siapa tahu mungkin ada cara resmi, sekarang ... ;-)
alexrjs
12

Package.json yang diperbarui :

"build": {
  "appId": "com.my-website.my-app",
  "productName": "MyApp",
  "copyright": "Copyright © 2019 ${author}",
  "mac": {
    "icon": "./public/icons/mac/icon.icns",     <---------- set Mac Icons
    "category": "public.app-category.utilities"
  },
  "win": {
    "icon": "./public/icons/png/256x256.png" <---------- set Win Icon
  },
  "files": [
    "./build/**/*",
    "./dist/**/*",
    "./node_modules/**/*",
    "./public/**/*",       <---------- need for get access to icons
    "*.js"
  ],
  "directories": {
    "buildResources": "public" <---------- folder where placed icons
  }
},

Setelah membangun aplikasi, Anda dapat melihat ikon. Solusi ini tidak menampilkan ikon dalam mode pengembang. Saya tidak mengatur ikon di new BrowserWindow().

Andrey Patseiko
sumber
1

Jika Anda ingin memperbarui ikon aplikasi di bilah tugas, maka Perbarui berikut di main.js (jika menggunakan naskah lalu main.ts)

win.setIcon(path.join(__dirname, '/src/assets/logo-small.png'));

__dirnamemenunjuk ke direktori root (direktori yang sama dengan package.json) aplikasi Anda.

Hari Das
sumber
yakin tentang mac?
Anil8753
0

Perlu diketahui bahwa contoh untuk path file ikon cenderung menganggap bahwa main.js berada di bawah direktori dasar. Jika file tidak ada di direktori dasar aplikasi, spesifikasi jalur harus menjelaskan fakta itu.

Misalnya, jika main.js berada di bawah src / subdirektori, dan ikon di bawah aset / ikon /, spesifikasi lintasan ikon ini akan berfungsi:

icon: __dirname + "../assets/icons/icon.png"
Giao Vu
sumber
0

pengemas elektron

Mengatur properti ikon saat membuat BrowserWindowhanya berpengaruh pada platform Windows dan Linux. Anda harus mengemas .icns untuk maks

Untuk mengatur ikon pada OS X menggunakan electron-packager, atur ikon menggunakan saklar --icon.

Ini harus dalam format .icns untuk OS X. Ada ikon konverter online yang dapat membuat file ini dari .png Anda.

pembangun elektron

Sebagai solusi terbaru, saya menemukan alternatif menggunakan --iconsakelar. Inilah yang dapat Anda lakukan.

  1. Buat direktori bernama builddi direktori proyek Anda dan letakkan .icnsikon di direktori sebagai nama icon.icns.
  2. jalankan builder dengan menjalankan perintah electron-builder --dir.

Anda akan menemukan ikon aplikasi Anda akan secara otomatis diambil dari lokasi direktori dan digunakan untuk aplikasi saat pengemasan.

Catatan : Jawaban yang diberikan adalah untuk versi terbaru electron-builderdan diuji dengan pembangun elektron v21.2.0

Kiran Maniya
sumber