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?
Electron / Atom Shell Uygulaması için uygulama simgesi nasıl ayarlanır
Yanıtlar:
Ö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.
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
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
@Nick, aşağıdakine benzer bir şey yapmanız gerekecek
—
Mateo
electron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
Sahip olduğum çözüm aşağıdadır:
mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});
__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 ?
Bunu macOS için de yapabilirsiniz. Tamam, kod aracılığıyla değil, bazı basit adımlarla:
- Kullanmak istediğiniz .icns dosyasını bulun, açın ve Düzen menüsünden kopyalayın
- Electron.app dosyasını, genellikle node_modules / elektron / dist içinde bulun
- Bilgi penceresini açın
- Sol üst köşedeki simgeyi seçin (etrafındaki gri kenarlık)
- Simgeyi cmd + v ile yapıştırın
- Geliştirme sırasında simgenizin keyfini çıkarın :-)
Aslında elektrona özgü olmayan genel bir şeydir. Bunun gibi birçok macOS uygulamasının simgesini değiştirebilirsiniz.
Bu harika, bunun için teşekkürler. Çalışması için sürükleyip bırakmam gerekiyordu ama yine de harika.
—
Robert Masen
Eksiksiz talimatlar: support.apple.com/kb/PH25383?locale=en_US
—
AndroidDev
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
@Dave Aslında dedi ki
—
Mia
6. Enjoy your icon during *development* :-)
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
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().
Elektron oluşturucu simgeleri destekler
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
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"
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.
buildProje dizininizde adlandırılmış bir dizin oluşturun.icnsve simgeyi adlandırılmış dizine yerleştirinicon.icns.- 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.
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