Electron / Atom Shell Uygulaması için uygulama simgesi nasıl ayarlanır


154

Electron uygulamanız için uygulama simgesini nasıl ayarlarsınız?

Deniyorum BrowserWindow({icon:'path/to/image.png'});ama işe yaramıyor.

Efekti görmek için uygulamayı paketlemem gerekir mi?



Mac için yapabileceğiniz bir şey postinstall, projenize .icns dosyasını node_modules / altında otomatik olarak kopyalayacak bir komut dosyası koymaktır.
theram

Yanıtlar:


168

Özelliği yalnızca iconoluştururken ayarlamak BrowserWindowWindows ve Linux üzerinde bir etkiye sahiptir.

Simgeyi OS X'te ayarlamak için, elektron paketleyiciyi kullanabilir ve --iconanahtarı kullanarak simgeyi ayarlayabilirsiniz .

OS X için .icns biçiminde olması gerekir. Bu dosyayı .png'nizden oluşturabilen çevrimiçi bir simge dönüştürücü vardır.


6
BrowserWindow'daki simgenin bir .PNG dosyasına ayarlanması, pencerelerdeki görev çubuğunda gösterilecektir. Çalışmasının bir örneği şu blogumda bulunabilir : mylifeforthecode.com/… __dirname + 'path / to / icon.png' olarak ayarladığım şekilde çalışabilmesi için yolun mutlak olması gerekebilir. Ancak, .exe için simgeyi ayarlamak için elektron paketleyici VEYA kaynak korsanını kullanmanız gerekir.
Shawn Rakowski

Bu yanıtı doğru Windows için düzeltebilir misiniz lütfen?
Ana Betts

Teşekkürler @ShawnRakowski, haklısın - Bunu daha yeni test ettim ve simge özelliği gerçekten Windows'ta da çalışıyor. Cevabımı bunu yansıtacak şekilde güncelledim.
Alex Warren

1
Bu ilk başta işe yaradı, ancak sonra dağıtılabilir uygulamayı arkadaşıma gönderdim ve işe yaramadı! Herhangi bir fikir?
Chet

10
@Nick, aşağıdakine benzer bir şey yapmanız gerekecekelectron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
Mateo

51

Sahip olduğum çözüm aşağıdadır:

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

19
__Dirname'nin / src / klasörünüzün yolu (yani app.js / main.js dosyanızın klasörü) olduğunu belirtmek gerekir.
Konstantin

.icnsgerekli değil ?
ishandutta2007

22

Bunu macOS için de yapabilirsiniz. Tamam, kod aracılığıyla değil, bazı basit adımlarla:

  1. Kullanmak istediğiniz .icns dosyasını bulun, açın ve Düzen menüsünden kopyalayın
  2. Electron.app dosyasını, genellikle node_modules / elektron / dist içinde bulun
  3. Bilgi penceresini açın
  4. Sol üst köşedeki simgeyi seçin (etrafındaki gri kenarlık)
  5. Simgeyi cmd + v ile yapıştırın
  6. Geliştirme sırasında simgenizin keyfini çıkarın :-)

görüntü açıklamasını buraya girin

Aslında elektrona özgü olmayan genel bir şeydir. Bunun gibi birçok macOS uygulamasının simgesini değiştirebilirsiniz.


6
Bu harika, bunun için teşekkürler. Çalışması için sürükleyip bırakmam gerekiyordu ama yine de harika.
Robert Masen


Bu sadece geliştirme için çalışıyor gibi görünüyor. 'İplik dist' çalıştırdığımda, icns dosyası varsayılan elektron bir ile değiştiriliyor.
Dave

2
@Dave Aslında dedi ki6. Enjoy your icon during *development* :-)
Mia

Pekala arkadaşlar ... Biliyorum ... Ama bu düzeltme 2 yıldan daha eski ... ;-) Ve btw. Bu "hack" i son bir yapıda da kullanabilmelisiniz, çünkü onu sadece dist uygulamasında değiştiriyorsunuz ... Bir süre denemediniz .. Ve kim bilir belki de resmi bir yol olabilir, şimdi ... ;-)
alexrjs

15

Package.json güncellendi :

"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
  }
},

Uygulama oluşturduktan sonra simgeleri görebilirsiniz. Bu çözüm, geliştirici modunda simgeleri göstermez. Simgeleri içinde ayarlamıyorum new BrowserWindow().



2

Görev çubuğundaki uygulama simgesini güncellemek istiyorsanız, ardından main.js'de aşağıdakileri güncelle (typecript kullanıyorsanız, o zaman main.ts)

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

__dirnamepackage.jsonuygulamanızın kök dizinini (ile aynı dizin ) gösterir.


Mac hakkında emin misin?
Anil8753

0

Lütfen, simge dosyası yolu örneklerinin, main.js'nin temel dizin altında olduğunu varsayma eğiliminde olduğunu unutmayın. Dosya uygulamanın temel dizininde değilse, yol belirtimi bu gerçeği hesaba katmalıdır.

Örneğin, main.js src / alt dizini altındaysa ve simge varlıklar / simgeler / altındaysa, bu simge yolu belirtimi çalışacaktır:

icon: __dirname + "../assets/icons/icon.png"

0

elektron paketleyici


Oluştururken simge özelliğini ayarlama BrowserWindowYalnızca Windows ve Linux platformları üzerinde bir etkiye sahiptir. .icns'i maks. paketlemeniz gerekir

Simgeyi kullanarak OS X'de ayarlamak için electron-packager simgeyi kullanarak ayarlamak için, --icon anahtarını kullanarak simgeyi ayarlayın.

OS X için .icns biçiminde olması gerekecektir. Bu dosyayı .png'nizden oluşturabilen bir çevrimiçi simge dönüştürücü vardır.

elektron oluşturucu


En yeni çözüm olarak, --iconswitch kullanmanın bir alternatifini buldum . İşte yapabilecekleriniz.

  1. buildProje dizininizde adlandırılmış bir dizin oluşturun .icnsve simgeyi adlandırılmış dizine yerleştirin icon.icns.
  2. komutu çalıştırarak oluşturucuyu çalıştırın electron-builder --dir.

Uygulama simgenizin o dizin konumundan otomatik olarak alınacağını ve paketleme sırasında bir uygulama için kullanılacağını göreceksiniz.

Not : Verilen yanıt electron-builderelektron oluşturucu v21.2.0'ın son sürümü içindir ve bu sürümle test edilmiştir.


0

Windows için Resource Hacker kullanın

İndir ve Kur:: D

http://www.angusj.com/resourcehacker/

  • Çalıştır
  • Aç seçin ve exe dosyasını seçin
  • Solunuzda Simge Grubu adlı bir klasör açın
  • Sağ tıklama 1: 1033
  • Değiştir simgesine tıklayın
  • İstediğiniz simgeyi seçin
  • Ardından değiştir simgesini seçin
  • Kaydedip kapatın

Uygulamayı inşa etmeliydin

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.