Eine Sache, die Sie für Mac tun können, ist, ein postinstallSkript in Ihr Projekt einzufügen, das die .icns-Datei unter node_modules / automatisch kopiert.
Theram
Antworten:
164
Das Festlegen der iconEigenschaft beim Erstellen der Eigenschaft BrowserWindowwirkt sich nur auf Windows und Linux aus.
Wenn Sie das Symbol im BrowserWindow auf eine PNG-Datei setzen, wird dies in der Taskleiste in Windows angezeigt. Ein Beispiel dafür finden Sie in meinem Blog hier: mylifeforthecode.com/… Es kann sein, dass der Pfad absolut sein muss, damit er funktioniert, wenn ich ihn auf __dirname + 'path / to / icon.png' setze. Um das Symbol für die EXE-Datei festzulegen, müssen Sie jedoch den Elektronenpacker ODER den Ressourcenhacker verwenden.
Shawn Rakowski
Können Sie diese Antwort korrigieren, um sie für Windows korrekt zu machen?
Ana Betts
Danke @ShawnRakowski, Sie haben Recht - ich habe dies gerade getestet und die Icon-Eigenschaft funktioniert tatsächlich auch unter Windows. Ich habe meine Antwort aktualisiert, um dies widerzuspiegeln.
Alex Warren
1
Das hat zuerst funktioniert, aber dann habe ich die verteilbare App an meinen Freund gesendet und es hat nicht funktioniert! Irgendwelche Ideen?
Chet
10
@ Nick müssen Sie etwas wie das folgende tunelectron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
Mateo
47
Unten ist die Lösung, die ich habe:
mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});
Dies scheint nur für die Entwicklung zu funktionieren. Wenn ich 'yarn dist' starte, wird die icns-Datei durch die Standard-Elektronendatei ersetzt.
Dave
2
@ Dave Eigentlich sagte er6. Enjoy your icon during *development* :-)
Mia
Na Leute ... ich weiß ... Aber dieser Fix ist über 2 Jahre alt ... ;-) Und übrigens. Sie sollten in der Lage sein, diesen "Hack" auch für einen endgültigen Build zu verwenden, da Sie ihn einfach in der dist-App ändern ... Ich habe es eine Weile nicht versucht. Und wer weiß, vielleicht gibt es jetzt einen offiziellen Weg ... ;-)
Nach dem Erstellen der Anwendung werden Symbole angezeigt. Diese Lösung zeigt im Entwicklermodus keine Symbole an. Ich richte keine Symbole ein new BrowserWindow().
Bitte beachten Sie, dass in den Beispielen für den Pfad der Symboldatei davon ausgegangen wird, dass sich main.js im Basisverzeichnis befindet. Befindet sich die Datei nicht im Basisverzeichnis der App, muss die Pfadangabe diese Tatsache berücksichtigen.
Befindet sich die Datei main.js beispielsweise im Unterverzeichnis src / und das Symbol unter Assets / icons /, funktioniert diese Symbolpfadspezifikation:
Das Festlegen der Symboleigenschaft beim Erstellen des Symbols BrowserWindowwirkt sich nur auf Windows- und Linux-Plattformen aus. Sie müssen die .icns für max
Um das Symbol unter OS X mit electron-packagerfestzulegen, setzen Sie das Symbol mit dem Schalter --icon.
Es muss im OSNS-Format für OS X vorliegen. Es gibt einen Online-Symbolkonverter, mit dem diese Datei aus Ihrer PNG-Datei erstellt werden kann.
Elektronenbauer
Als neueste Lösung habe ich eine Alternative zur Verwendung von --iconSwitch gefunden. Hier ist was Sie tun können.
Erstellen Sie ein Verzeichnis mit dem Namen buildin Ihrem Projektverzeichnis und fügen Sie .icnsdas Symbol wie angegeben in das Verzeichnis ein icon.icns.
Führen Sie den Builder aus, indem Sie den Befehl ausführen electron-builder --dir.
Sie werden feststellen, dass Ihr Anwendungssymbol automatisch von diesem Verzeichnis abgerufen und beim Packen für eine Anwendung verwendet wird.
Hinweis : Die angegebene Antwort electron-builderbezieht sich auf die aktuelle Version von und wurde mit Electron-Builder v21.2.0 getestet
postinstall
Skript in Ihr Projekt einzufügen, das die .icns-Datei unter node_modules / automatisch kopiert.Antworten:
Das Festlegen der
icon
Eigenschaft beim Erstellen der EigenschaftBrowserWindow
wirkt sich nur auf Windows und Linux aus.Um das Symbol unter OS X festzulegen , können Sie den Elektronenpacker verwenden und das Symbol mit dem
--icon
Schalter festlegen .Es muss im OSNS-Format für OS X vorliegen. Es gibt einen Online- Symbolkonverter , mit dem diese Datei aus Ihrer PNG-Datei erstellt werden kann.
quelle
electron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
Unten ist die Lösung, die ich habe:
quelle
.icns
nicht benötigt ?Sie können dies auch für macOS tun. Ok, nicht durch Code, sondern mit einigen einfachen Schritten:
Eigentlich ist es eine allgemeine Sache, die nicht elektronenspezifisch ist. Sie können das Symbol vieler MacOS-Apps wie folgt ändern.
quelle
6. Enjoy your icon during *development* :-)
Aktualisiert package.json:
Nach dem Erstellen der Anwendung werden Symbole angezeigt. Diese Lösung zeigt im Entwicklermodus keine Symbole an. Ich richte keine Symbole ein
new BrowserWindow()
.quelle
Electron Builder unterstützt Symbole
quelle
Wenn Sie das App-Symbol in der Taskleiste aktualisieren möchten, klicken Sie in main.js auf Update (bei Verwendung von Typoskript auf main.ts).
__dirname
verweist auf das Stammverzeichnis (dasselbe Verzeichnis wiepackage.json
) Ihrer Anwendung.quelle
Bitte beachten Sie, dass in den Beispielen für den Pfad der Symboldatei davon ausgegangen wird, dass sich main.js im Basisverzeichnis befindet. Befindet sich die Datei nicht im Basisverzeichnis der App, muss die Pfadangabe diese Tatsache berücksichtigen.
Befindet sich die Datei main.js beispielsweise im Unterverzeichnis src / und das Symbol unter Assets / icons /, funktioniert diese Symbolpfadspezifikation:
quelle
Elektronenverpacker
Das Festlegen der Symboleigenschaft beim Erstellen des Symbols
BrowserWindow
wirkt sich nur auf Windows- und Linux-Plattformen aus. Sie müssen die .icns für maxUm das Symbol unter OS X mit
electron-packager
festzulegen, setzen Sie das Symbol mit dem Schalter --icon.Es muss im OSNS-Format für OS X vorliegen. Es gibt einen Online-Symbolkonverter, mit dem diese Datei aus Ihrer PNG-Datei erstellt werden kann.
Elektronenbauer
Als neueste Lösung habe ich eine Alternative zur Verwendung von
--icon
Switch gefunden. Hier ist was Sie tun können.build
in Ihrem Projektverzeichnis und fügen Sie.icns
das Symbol wie angegeben in das Verzeichnis einicon.icns
.electron-builder --dir
.Sie werden feststellen, dass Ihr Anwendungssymbol automatisch von diesem Verzeichnis abgerufen und beim Packen für eine Anwendung verwendet wird.
quelle