इलेक्ट्रॉन / एटम शेल ऐप के लिए ऐप आइकन कैसे सेट करें

Question

आप अपने इलेक्ट्रॉन ऐप के लिए ऐप आइकन कैसे सेट करते हैं?

मैं कोशिश कर रहा हूं BrowserWindow({icon:'path/to/image.png'});लेकिन यह काम नहीं करता है।

क्या मुझे प्रभाव देखने के लिए ऐप को पैक करने की आवश्यकता है?

Comments

आप github.com/onmyway133/blog/issues/66

— onmyway133

एक चीज जो आप मैक के लिए कर सकते हैं, वह postinstallआपके प्रोजेक्ट में एक स्क्रिप्ट डालती है जो नोड .modules / के तहत स्वचालित रूप से .icns फ़ाइल की प्रतिलिपि बनाएगी।

— थेरम

Answer 1

केवल iconबनाते समय संपत्ति सेट करना BrowserWindowविंडोज और लिनक्स पर प्रभाव पड़ता है।

OS X पर आइकन सेट करने के लिए, आप इलेक्ट्रॉन-पैकर का उपयोग कर सकते हैं और --iconस्विच का उपयोग करके आइकन सेट कर सकते हैं ।

यह ओएस एक्स के लिए .icns प्रारूप में होना चाहिए। एक ऑनलाइन आइकन कनवर्टर है जो इस फ़ाइल को ppng से बना सकता है।

Comments

.WGG फ़ाइल के लिए BrowserWindow पर आइकन सेट करना विंडोज़ में टास्कबार में दिखाई देगा। इसके काम करने का एक उदाहरण यहाँ मेरे ब्लॉग पर पाया जा सकता है: mylifeforthecode.com/…। यह हो सकता है कि काम करने के लिए पथ को निरपेक्ष रखने की आवश्यकता हो क्योंकि मैंने इसे __dirname + 'पथ / से / icon.png' पर सेट किया है। हालाँकि, .exe के लिए आइकन सेट करने के लिए आपको इलेक्ट्रॉन-पैकर या संसाधन हैकर का उपयोग करना होगा।

— शॉन राकोवस्की

क्या आप इस जवाब को ठीक कर सकते हैं।

— अना बेट्स

धन्यवाद @ ShhawnRakowski, आप सही हैं - मैंने अभी इसका परीक्षण किया है और आइकन प्रॉपर्टी वास्तव में विंडोज पर भी काम करती है। मैंने इसे दर्शाने के लिए अपना उत्तर अपडेट कर दिया है।

— एलेक्स वॉरेन

इसने पहले काम किया, लेकिन फिर मैंने अपने दोस्त को वितरण योग्य ऐप भेजा और यह काम नहीं किया! कोई विचार?

— चेत

@ अगर आपको निम्नलिखित की तरह कुछ करने की आवश्यकता होगीelectron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"

— मेटो

Answer 2

नीचे समाधान है कि मेरे पास है:

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

Comments

वर्थ का उल्लेख है कि __dirname आपके / src / folder का पथ है (अर्थात आपके app.js / main.js फ़ाइल का फ़ोल्डर)।

— कॉन्स्टेंटिन

.icnsजरूरत नहीं ?

— ishandutta2007

Answer 3

आप इसे macOS के लिए भी कर सकते हैं। ठीक है, कोड के माध्यम से नहीं, लेकिन कुछ सरल चरणों के साथ:

1. आप जिस फ़ाइल का उपयोग करना चाहते हैं, उसे खोजें, खोलें और उसे संपादित करें मेनू के माध्यम से कॉपी करें
2. आमतौर पर नोड_मॉड्यूल्स / इलेक्ट्रॉन / डिस्ट में इलेक्ट्रान.प्प का पता लगाएं
3. जानकारी विंडो खोलें
4. ऊपरी बाएँ कोने पर आइकन का चयन करें (इसके चारों ओर ग्रे बॉर्डर)
5. Cmd + v के माध्यम से आइकन पेस्ट करें
6. विकास के दौरान अपने आइकन का आनंद लें :-)

वास्तव में यह एक सामान्य बात है जो इलेक्ट्रॉन के लिए विशिष्ट नहीं है। आप इस तरह कई macOS ऐप के आइकन बदल सकते हैं।

Comments

यह आश्चर्यजनक है, इसके लिए धन्यवाद। मुझे इसे काम करने के लिए खींचने और छोड़ने की ज़रूरत थी, लेकिन फिर भी आश्चर्यजनक रूप से।

— रॉबर्ट मासेन

पूर्ण निर्देश: support.apple.com/kb/PH25383?locale=en_US

— AndroidDev

यह केवल विकास के लिए काम करता है। जब मैं 'यार्न डिस्ट' चलाता हूं, तो आइकन्स फ़ाइल को डिफ़ॉल्ट इलेक्ट्रॉन एक के साथ बदल दिया जाता है।

— डेव

@ क्या वास्तव में उन्होंने कहा था6. Enjoy your icon during *development* :-)

— मिया

खैर दोस्तों ... मुझे पता है ... लेकिन यह फिक्स 2 साल से अधिक पुराना है; ;-) और btw। आपको अंतिम बिल्ड पर इस "हैक" का उपयोग करने में सक्षम होना चाहिए, क्योंकि आप बस इसे सटीक ऐप पर बदलते हैं ... थोड़ी देर के लिए प्रयास नहीं किया है .. और कौन जानता है कि शायद एक आधिकारिक तरीका है, अब ... ;-)

— अलेक्स्रज्स

Answer 4

अपडेट किया गया पैकेज .json:

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

बिल्ड एप्लिकेशन के बाद आप आइकन देख सकते हैं। यह समाधान डेवलपर मोड में आइकन नहीं दिखाता है। मैं आइकन सेट नहीं करता हूं new BrowserWindow()।

Answer 5

इलेक्ट्रॉन बिल्डर माउस का समर्थन करता है

Answer 6

यदि आप टास्कबार में ऐप आइकन अपडेट करना चाहते हैं, तो main.js में निम्नलिखित अपडेट करें (यदि टाइपस्क्रिप्ट का उपयोग करके main.ts)

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

__dirnamepackage.jsonआपके आवेदन के रूट निर्देशिका (उसी निर्देशिका के रूप में ) को इंगित करता है ।

Comments

मैक के बारे में निश्चित?

— अनिल

Answer 7

कृपया ध्यान रखें कि आइकन फ़ाइल पथ के उदाहरण यह मान लेते हैं कि main.js आधार निर्देशिका के अंतर्गत है। यदि फ़ाइल ऐप की आधार निर्देशिका में नहीं है, तो पथ विनिर्देश उस तथ्य के लिए होना चाहिए।

उदाहरण के लिए, यदि main.js src / subdirectory के तहत है, और आइकन संपत्ति / आइकन / के अधीन है, तो यह आइकन पथ विनिर्देश काम करेगा:

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

Answer 8

इलेक्ट्रॉन बंडल

---

BrowserWindowकेवल Windows और Linux प्लेटफ़ॉर्म पर प्रभाव डालने पर आइकन प्रॉपर्टी सेट करना । आपको अधिकतम के लिए .icns को पैकेज करना होगा

OS X का उपयोग करके electron-packagerआइकन सेट करने के लिए, --icon स्विच का उपयोग करके आइकन सेट करें।

यह ओएस एक्स के लिए .icns प्रारूप में होना चाहिए। एक ऑनलाइन आइकन कनवर्टर है जो इस फ़ाइल को ppng से बना सकता है।

इलेक्ट्रॉन बिल्डर

---

सबसे हाल के समाधान के रूप में, मुझे --iconस्विच का उपयोग करने का एक विकल्प मिला । यहाँ आप क्या कर सकते हैं।

1. buildअपनी परियोजना निर्देशिका में एक निर्देशिका नाम बनाएँ और निर्देशिका .icnsमें आइकन को नाम के रूप में रखें icon.icns।
2. कमांड निष्पादित करके बिल्डर चलाएं electron-builder --dir।

आप पाएंगे कि आपका एप्लिकेशन आइकन स्वचालित रूप से उस निर्देशिका स्थान से उठाया जाएगा और पैकेजिंग के दौरान एक एप्लिकेशन के लिए उपयोग किया जाएगा।

नोट : दिया गया उत्तर हाल के संस्करण के लिए है electron-builderऔर इसका परीक्षण इलेक्ट्रॉन-बिल्डर v21.2.0 के साथ किया गया है