it-swarm.com.de

So legen Sie das App-Symbol für Electron / Atom Shell App

Wie legen Sie das App-Symbol für Ihre Electron-App fest?

Ich versuche BrowserWindow({icon:'path/to/image.png'});, aber es funktioniert nicht.

Muss ich die App packen, um den Effekt zu sehen?

122
Jo E.

Das Festlegen der Eigenschaft icon beim Erstellen von BrowserWindow wirkt sich nur auf Windows und Linux aus.

Um das Symbol unter OS X festzulegen, können Sie electron-packager verwenden und das Symbol mit dem Schalter --icon Festlegen.

Es muss im .icns-Format für OS X vorliegen. Es gibt einen Online-Icon-Konverter , der diese Datei aus Ihrer .png-Datei erstellen kann.

146
Alex Warren

Unten ist die Lösung, die ich habe:

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

Sie können dies auch für macOS tun. Ok, nicht durch Code, sondern mit ein paar einfachen Schritten:

  1. Suchen Sie die gewünschte .icns-Datei, öffnen Sie sie und kopieren Sie sie über das Menü Bearbeiten
  2. Finden Sie die electron.app, normalerweise in node_modules/electron/dist
  3. Öffnen Sie das Informationsfenster
  4. Wählen Sie das Symbol in der oberen linken Ecke (grauer Rand)
  5. Fügen Sie das Symbol mit cmd + v ein
  6. Viel Spaß mit deinem Icon während der Entwicklung :-)

enter image description here

Tatsächlich ist es eine allgemeine Sache, die nicht spezifisch für Elektronen ist. Sie können das Symbol vieler macOS-Apps wie dieses ändern.

17
alexrjs

Aktualisiert package.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
  }
},

Nach dem Erstellen der Anwendung sehen Sie Symbole. Diese Lösung zeigt im Entwicklermodus keine Symbole an. Ich richte keine Symbole in new BrowserWindow() ein.

1
Andrey Patseiko

Beachten Sie, dass in den Beispielen für den Pfad der Symboldatei in der Regel angenommen wird, dass sich main.js im Basisverzeichnis befindet. Befindet sich die Datei nicht im Basisverzeichnis der App, muss dies in der Pfadangabe berücksichtigt werden.

Befindet sich die Datei main.js beispielsweise im Unterverzeichnis src/und befindet sich das Symbol unter assets/icons /, funktioniert die folgende Symbolpfadangabe:

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

Wenn Sie das App-Symbol in der Taskleiste aktualisieren möchten, aktualisieren Sie die folgenden in main.js (wenn Sie TypeScript verwenden, dann main.ts)

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

__dirname zeigt auf das Stammverzeichnis (dasselbe Verzeichnis wie package.json) Ihrer Bewerbung.

0
Hari Das

Electron Builder nterstützt Icons

0
loevborg