Einbindung von Icons in Skripts

Zitat von Mira_Belle

Z.B. so etwas:

JavaScript

// ------------------------------------------------------------------------------------------------
	// Pfad zum Profilordner
	let ProfilePath = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
	// Pfad in den entsprechenden Unterordner
	let IconPath = '/chrome/icons/'; // Pfad in den entsprechenden Unterordner
	// Name & Dateiendung des anzuzeigenden Symbols!
	let ButtonIcon = "Google.svg";
	menuitem.style.listStyleImage = 'url("' + ("file:" + ProfilePath + IconPath + ButtonIcon) + '")';
// ------------------------------------------------------------------------------------------------

Und dann eine Erklärung für "Beginners", was sie damit anfangen sollen!

Wenn es jetzt noch möglich wäre, einen automatischen Fallback einzurichten.

Wenn ein eigenes Icon - hier Google.svg - nicht gefunden wird/existiert, wird ein Firefox Icon benutzt - wie etwa chrome://browser/skin/translations.svg - aber nur dann.

Damit hätten Anfänger sowohl ein sofort sichtbares Icon, als auch die Möglichkeit ein eigenes Icon in chrome/icons zu benutzen, ohne den JS Code verändern zu müssen.

Ich habe mich mal danach umgeschaut, aber noch keine Lösung gefunden.
Das Ganze sollte dann auch nicht die Leistung negativ beeinflussen.

Oder halt sowas, da muss nur eine Zeile manuell geändert werden, um zwischen beiden Varianten umzuschalten.

Zitat von Mira_Belle

Und dann eine Erklärung für "Beginners", was sie damit anfangen sollen!

Nun, dies ist eine besondere Variante. Hier wird der Pfad zusammengebaut. Auf den ersten Blick einfach, weil man nur den Namen der Datei unter ButtonIcon angeben müsste. Aber das Skript bietet nicht die Möglichkeit eine chrome://-Grafik zu verwenden, sondern verlangt, dass es unter chrome/icons bereits die gewünschte Grafik gibt. Die Grafik müsste also erst einmal von irgendwoher kommen, z. B. von Endors Seite.

Zitat von Horstmann

Wenn es jetzt noch möglich wäre, einen automatischen Fallback einzurichten.

Eventuell zwei Zeilen, die erste ist von Anfang an aktiv und gibt den Pfad zur chrome://-Datei an und einen entsprechenden Kommentar. Und die zweite erst einmal auskommentierte Zeile mit einem Beispielpfad, wo der Kommentar angibt, dass man da eine eigen Datei angeben kann und dass man die Kommentarzeichen vor dieser Zeile entfernen und vor die erste Zeile setzen muss. Aber diese Zusammenbau-Variante verkompliziert das meiner Meinung nach.

Zitat von milupo

Eventuell zwei Zeilen, die erste ist von Anfang an aktiv und gibt den Pfad zur chrome://-Datei an und einen entsprechenden Kommentar. Und die zweite erst einmal auskommentierte Zeile mit einem Beispielpfad, wo der Kommentar angibt, dass man da eine eigen Datei angeben kann und dass man die Kommentarzeichen vor dieser Zeile entfernen und vor die erste Zeile setzen muss.

Mit Verlaub: das halte ich für eine gute, machbare Variante, da kann Nachfragenden einfach geholfen werden.

Zitat von milupo

Zitat von Horstmann

Wenn es jetzt noch möglich wäre, einen automatischen Fallback einzurichten.

Eventuell zwei Zeilen, die erste ist von Anfang an aktiv und gibt den Pfad zur chrome://-Datei an und einen entsprechenden Kommentar. Und die zweite erst einmal auskommentierte Zeile mit einem Beispielpfad, wo der Kommentar angibt, dass man da eine eigen Datei angeben kann und dass man die Kommentarzeichen vor dieser Zeile entfernen und vor die erste Zeile setzen muss. Aber diese Zusammenbau-Variante verkompliziert das meiner Meinung nach.

Deshalb wäre eben ein Fallback wie in CSS perfekt, das kapiere ich aber nicht in JS.

Ansonsten, egal wie ein alternatives Icon angeboten würde, ob von Firefox oder über Endor's Seite - gleiches Prinzip, nur Zusatzarbeit für Endor - bräuchte es halt einen manuell zu schaltenden//kommentierenden Code.

Wie sowas, was aber auch kein Fortschritt ist zu meinem ersten Versuch in #59, nur hässlicher im Code.

//profile-button.uc.js tester icons

  (function() {



   if (location.href !== 'chrome://browser/content/browser.xhtml')
    return;

    try {
        CustomizableUI.createWidget({
            id: 'Profiles_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {
                let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                let buttonicon = "LettersP-1.png";

                // tester
                //eigenes icon
                //let styler = 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");';
                //Firefox icon
                let styler = 'list-style-image: url("chrome://browser/skin/translations.svg");';

                let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                    let props = {
                    id: 'Profiles_button',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Profiles',
                    tooltiptext: 'about:profiles',
                    // original
                    //style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',

                    // tester
                    style: styler
                };

                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { }

    document.getElementById('Profiles_button').addEventListener('click', event => {
      if (event.button === 0) {
        openTrustedLinkIn("about:profiles", "tab");
      }
    });
})();

Zitat von harff182

Mit Verlaub: das halte ich für eine gute, machbare Variante, da kann Nachfragenden einfach geholfen werden.

Wieso dann „Mit Verlaub“? „Mit Verlaub“ bedeutet, dass du mir widersprechen willst, aber offensichtlich findest du meinen Vorschlag gut. Oder meinst du die Zusammenbau-Variante?

Zitat von Horstmann

Wie sowas, was aber auch kein Fortschritt ist zu meinem ersten Versuch in #59, nur hässlicher im Code.

Es müsste auch Kommentar am Skript-Anfang stehen, was es in diesem Fall mit den Zeilen 21 und 23 auf sich hat.

Zitat von milupo

Wieso dann „Mit Verlaub“? „Mit Verlaub“ bedeutet, dass du mir widersprechen willst,

Nein,Das bezog sich auf:

Zitat von milupo

Aber diese Zusammenbau-Variante verkompliziert das meiner Meinung nach.

Zitat von milupo

, aber offensichtlich findest du meinen Vorschlag gut

Genau.

Zitat von milupo

Zitat von Horstmann

Wie sowas, was aber auch kein Fortschritt ist zu meinem ersten Versuch in #59, nur hässlicher im Code.

Es müsste auch Kommentar am Skript-Anfang stehen, was es in diesem Fall mit den Zeilen 21 und 23 auf sich hat.

Das versteht sich, die Frage ist nur ob man diesen (kl)einen Schritt Leuten zumuten kann.
Der Vorteil von den fest integrierten Icons ist ja, dass niemand den JS Code auch nur öffnen muss - der Nachteil, ohne Eigeninitiative in entweder JS oder CSS: kein eigenes Icon.

Persönlich denke ich ja, Javascript Benutzer sollten den Schritt machen können; aber wir reden hier - wie so oft - eigentlich nur über User die komplett fertige Lösungen wollen oder brauchen, was ich auf eine Art auch verstehen kann.

Ich zitiere mich mal selber.

So, ...

Zitat

// ------------------------------------------------------------------------------------------------
// Pfad zum Profilordner
let ProfilePath = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
// Pfad in den entsprechenden Unterordner
let IconPath = '/chrome/icons/'; // Pfad in den entsprechenden Unterordner
// Name & Dateiendung des anzuzeigenden Symbols!
let ButtonIcon = "Google.svg";
menuitem.style.listStyleImage = 'url("' + ("file:" + ProfilePath + IconPath + ButtonIcon) + '")';
// ------------------------------------------------------------------------------------------------

Alles anzeigen

... und als Fallback so ...

Zitat

menuitem.style.listStyleImage = ' url("chrome://browser/skin/translations.svg")';

Nun muss "nur" noch das Ding mit der Prüfung geschrieben werden.
Nur noch

Will man wirklich ein einfaches Skript so aufblähen?

Dann doch lieber dem Anwender erklären, dass er, wenn er eine eigene Grafik verwenden möchte,
sich diese im Ordner "icons" zu befinden hat!
Und wenn nicht, ist halt standardmäßig "translations.svg" aktiv.

Nachtrag!
Wer gefallen an solchen SVG-Grafiken, kann mich fragen, dann bekommt er alle die ich habe in einem Paket!
Und wer jetzt schon neugierig ist, ... icons_3.zip

Zitat von Horstmann

aber wir reden hier - wie so oft - eigentlich nur über User die komplett fertige Lösungen wollen oder brauchen

Das werden die meisten Leute sein und ein Großteil davon wird das haben wollen, weil ihnen die Kenntnisse fehlen und sie das dennoch nutzen wollen. Über erfahrene Nutzer brauchen wir hier nicht groß reden, die bauen sich das zurecht, wie sie es gerne hätten. Aber ich würde gerne solchen unerfahrenen Nutzern immer ein bisschen Wissen mitgeben (natürlich muss ich selbst das erst einmal haben ). Und es ist mir dann doch etwas wenig, wenn ein Nutzer bloß an einer Stelle einen Dateinamen einzutragen braucht.

So, mit Fallback.
Als Muster für andere Skripte.

// ------------------------------------------------------------------------------------------------
	// Pfad zum Profilordner
	let ProfilePath = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
	// Pfad in den entsprechenden Unterordner
	let IconPath = '/chrome/icons/'; // Pfad in den entsprechenden Unterordner
	// Name & Dateiendung des anzuzeigenden Symbols!
	let ButtonIcon = "Google.svg";

	// Erstelle ein img-Element, um zu überprüfen, ob die Grafik geladen werden kann
	let img = new Image();
	img.src = "file:" + ProfilePath + IconPath + ButtonIcon;

	img.onload = function() {
		// Wenn die Grafik geladen werden kann, setze das listStyleImage
		menuitem.style.listStyleImage = 'url("' + ("file:" + ProfilePath + IconPath + ButtonIcon) + '")';
	};

	img.onerror = function() {
		// Wenn die Grafik nicht geladen werden kann, verwende das Fallback-Icon
		menuitem.style.listStyleImage = 'url("chrome://browser/skin/translations.svg")';
	};
// ------------------------------------------------------------------------------------------------

Zitat von Mira_Belle

So, mit Fallback.
Als Muster für andere Skripte.

JavaScript

// ------------------------------------------------------------------------------------------------
	// Pfad zum Profilordner
	let ProfilePath = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
	// Pfad in den entsprechenden Unterordner
	let IconPath = '/chrome/icons/'; // Pfad in den entsprechenden Unterordner
	// Name & Dateiendung des anzuzeigenden Symbols!
	let ButtonIcon = "Google.svg";

	// Erstelle ein img-Element, um zu überprüfen, ob die Grafik geladen werden kann
	let img = new Image();
	img.src = "file:" + ProfilePath + IconPath + ButtonIcon;

	img.onload = function() {
		// Wenn die Grafik geladen werden kann, setze das listStyleImage
		menuitem.style.listStyleImage = 'url("' + ("file:" + ProfilePath + IconPath + ButtonIcon) + '")';
	};

	img.onerror = function() {
		// Wenn die Grafik nicht geladen werden kann, verwende das Fallback-Icon
		menuitem.style.listStyleImage = 'url("chrome://browser/skin/translations.svg")';
	};
// ------------------------------------------------------------------------------------------------

Alles anzeigen

Mira, wenn wir dich nicht hätten, und die kleinen Kartoffeln - vielen Dank!

Kleiner Schönheitsfehler nur auf meiner Seite; das ist nur ein schneller erster Test, und dein Code etwas umgebaut um meinen existierenden Code nicht komplett anzupassen zu müssen - aber die Einbindung ist bei mir noch etwas grob.

Das alte Problem mit dem zweiten Fenster : ich muss den Code nach unten schieben, raus aus dem oberen Codeblock/Loop(?), und ein paar Variablen wiederholen, damit er auch im Elchtest funktioniert.

A propos, was ist eigentlich der Grund für den ganzen props Code, hier Zeile 29-39?
Kann man die Attribute nicht direkt einfügen?
Ich denke da kommt das Problem her.

Kein Drama, aber halt nicht sehr elegant:

//profile-button.uc.js tester icons Mira

  (function() {

   if (location.href !== 'chrome://browser/content/browser.xhtml')
    return;

    try {
        CustomizableUI.createWidget({
            id: 'Profiles_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {
                let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                let buttonicon = "LettersP-1.png";

                // let img = new Image();
                // img.src = "file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon;
                //
                // img.onload = function() {
                //   toolbaritem.style.listStyleImage = 'url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '")';
                //     };
                //
                // img.onerror = function() {
                // toolbaritem.style.listStyleImage = 'url("chrome://browser/skin/translations.svg")';
                //    };

                let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                    let props = {
                    id: 'Profiles_button',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Profiles',
                    tooltiptext: 'about:profiles',
                    style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
                };
                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { }

    document.getElementById('Profiles_button').addEventListener('click', event => {
      if (event.button === 0) {
        openTrustedLinkIn("about:profiles", "tab");
      }
    });

    let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
    let buttonicon = "LettersP-1.png";

    let img = new Image();
    img.src = "file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon;

    img.onload = function() {
      document.getElementById('Profiles_button').style.listStyleImage = 'url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '")';
        };

    img.onerror = function() {
    document.getElementById('Profiles_button').style.listStyleImage = 'url("chrome://browser/skin/translations.svg")';
       };

})();

Nur als Ergänzung, denn die Variante hier ist vermutlich gut verständlich, ich würde nur die Zeile mit dem ProfilePath, die ja nicht konfiguriert werden soll, weiter nach unten schieben, direkt vor die derzeitige Zeile 9:
Um mich selbst zu zitieren, meine gestrige Antwort auf Mira_Belle an anderer Stelle:

Zitat von Speravir

Zitat von Mira_Belle

Und lassen sich so zum Bleistift einbinden.

Das kann man sogar zusammenfügen: Zeile 1 und 2 vertauscht, Variablenname angepasst:

JavaScript

let ButtonIcon = "default_icon.svg"; // Name & Dateiendung des anzuzeigenden Symbols!
let IconPath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons', ButtonIcon )); // Pfad zum Profilordner und gleich in den entsprechenden Unterordner

Und dann Zeile 6 entsprechend geändert:

Code

#browser-toolbox-button { list-style-image: url("${IconPath}") }

Und die Einbindung als List-Style-Image mag zwar meistens so sein, aber es ist auch möglich, dass ein Symbol als Hintergrundbild eingebunden wird.

Endor hat geschrieben, dass er kaum Zeit hat. Man müsste ihm daher möglichst detailliert

• jedes so geänderte Skript fertig anbieten, einige Skripte müssten übrigens demnächst sowieso einen Hinweis erhalten, dass sie nur funktionieren, wenn die Einstellung security.allow_unsafe_dangerous_privileged_evil_eval auf true gesetzt wird;
• das dazu gehörende Bild oder die dazu gehörenden Bilder bereitstellen; die Dateinamen der Bilder müssten sich auf das dazugehörende Skript beziehen und zur Unterscheidung einen Zusatz wie true/aktiv/active/enabled/on bzw. false/inaktiv/inactive/disabled/off erhalten oder im Beispiel AnimationToggleButton.uc.js dann eben normal, once und none,
• einen Text schreiben, den er als Readme bereitstellen kann.

Wo diese Bilder zu finden sind, müsste am besten im Skript selbst benannt werden. Endor, ich glaube, ein eigenes Verzeichnis Icons oder Bilder wäre sinnvoll. Ein einziges icons.zip halte ich jedenfalls nicht für ideal: Das müsste bei jedem neuen Skript oder sonst möglichen Änderungen neu gepackt werden und, wenn man dann ein neues Skript herunterlädt, auch jedes Mal vollständig heruntergeladen werden, obwohl man nur die neuen Symbole haben will.

Und noch etwas Mira_Belle und Horstmann. Ich finde jetzt auf die Schnelle die Stelle nicht mehr, wo ihr etwas von Einbindung ohne CSS schreibt: Das hier ist verstecktes Inline-CSS:

menuitem.style.listStyleImage = 'url("' + ("file:" + ProfilePath + IconPath + ButtonIcon) + '")';

Und das ist dann auch nicht allzu viel besser als base64-Bilder, oder irre ich mich da, Sören Hentzschel?

(Ich bemerke gerade, dass diverse Seiten Inline-CSS empfehlen, weil Google externes CSS als negativ bewerten soll, dabei aber internes CSS meinen, zum Verständnis beispielsweise Was ist der Unterschied zwischen Inline-, Internen- und Externen-CSS?)

Zitat von Speravir

Endor hat geschrieben, dass er kaum Zeit hat.

Danke Speravir.
Genau so ist es. Beruf und schwer kranker Vater, da bleibt fast keine Zeit mehr
für was anderes. Ich aktualisiere gerne alle Scripte sobald ihr sie fertig habt.
Gebt mir bitte Bescheid. Auch wenn ich nicht ein geloggt bin lese ich immer mit.
Viele Grüße
Endor

Werden wir machen, versprochen.

Wir haben ja noch etwas "Redebedarf" und so wird das auch noch ein Weilchen dauern!

# ------------------------------------------------------------------------------------------------- #

Das mit dem CSS ist so eine Sache.
So ganz wird es wohl nicht gehen!
So Sachen, wie verstecktes Inline-CSS, wird man immer mal nutzen müssen.

Der große Unterschied zu base64 ist, es muss nicht erst etwas aus dem Netz geladen werden!
Die Grafiken liegen ja lokal vor!

Und zu dem Link! Sören hat dieses Thema ja schon einmal kommentiert!
Ja, bei größeren Projekten ergibt es auf jeden Fall Sinn CSS auszulagern, der besseren Wartbarkeit wegen.
Aber das hier, was wir machen, sind dann doch eher Kleinigkeiten!
Und der Vorteil den ich darin sehe Inline-CSS zu verwenden, man "installiert" eine Datei und fertig!
Funktioniert es nicht, muss man dann halt schauen, aber in der Regel sollte es funktionieren,
ohne dass da ein User noch viel machen muss.

Wir sollten aber für DIESE Diskussion, so finde ich, ein eigenes Thema aufmachen, oder?

Zitat von Speravir

Und das ist dann auch nicht allzu viel besser als base64-Bilder, oder irre ich mich da, Sören Hentzschel?

Es ist besser, weil du am Ende trotzdem eine Bild-Datei einbindest und diese gecacht werden kann. Das geht mit data:-URIs nicht. Außerdem beansprucht das Anzeigen als Bilder anstelle von data:-URIs weniger CPU-Leistung.

Zitat von Speravir

(Ich bemerke gerade, dass diverse Seiten Inline-CSS empfehlen, weil Google externes CSS als negativ bewerten soll, dabei aber internes CSS meinen, zum Verständnis beispielsweise Was ist der Unterschied zwischen Inline-, Internen- und Externen-CSS?)

Den Teil verstehe ich nicht. Inline-CSS sollte man, sofern möglich, eher vermeiden als dass es eine sinnvolle Empfehlung ist. Aber Google interessiert es weder, wie das CSS eingebunden wird (ich kann mir höchstens indirekte Faktoren vorstellen, wie dass tausende Zeilen CSS in einer HTML-Datei das Dokument größer machen), noch sind Googles Suchmaschinen-Algorithmen für Firefox-Scripts relevant.

Im JS-Skript für GreaseMonkey können Sie das Online-Symbol verwenden // @icon https://www.google.com/favicon.ico
Für kontext-Übersetzer von Google und DeepL wäre dies möglicherweise eine gute Möglichkeit, Originalsymbole zu erhalten. Wenn das möglich ist.

Zitat von Mira_Belle

Wir sollten aber für DIESE Diskussion, so finde ich, ein eigenes Thema aufmachen, oder?

Das macht Sinn; da könnte 2002Andreas evtl. mal ran und verschieben.

Und, Test:

//profile-button.uc.js tester icons Mira 1b

  (function() {

   if (location.href !== 'chrome://browser/content/browser.xhtml')
    return;

    try {
        CustomizableUI.createWidget({
            id: 'Profiles_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {
                //let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                //let buttonicon = "LettersP-1.png";


                let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                    let props = {
                    id: 'Profiles_button',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Profiles',
                    tooltiptext: 'about:profiles',
                    //style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
                };
                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { }

      document.getElementById('Profiles_button').addEventListener('click', event => {
        if (event.button === 0) {
          openTrustedLinkIn("about:profiles", "tab");
        }
      });

      let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
      let buttonicon = "LettersP-1.png";

      let img = new Image();
      img.src = "file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon;
      img.onload = function() {
        Profiles_button.style.listStyleImage = 'url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '")';
      };
      img.onerror = function() {
        Profiles_button.style.listStyleImage = 'url("chrome://browser/skin/translations.svg")';
      };
})();

Zitat von 2002Andreas

Zitat von Horstmann

evtl. mal ran und verschieben.

Das kann ich machen wenn du mir sagst, ab welchem Beitrag und welchen Titel der Thread dann haben soll.

Mein Vorschlag, ab #48, dann geht kein Thread spezifischer Code verloren.

Titel könnte etwa sein: Einbindung von Icons in Skripts.

Für mich stellt sich bei dem Thema im Eigentlichen die Frage, wie man generell, als Skript Author, Icons am besten einbindet.

Generell, für diverse existierende Skript-Layouts(?), nicht für jedes einzelne Skript.

Das Ziel wäre mE den einfachen Zugang zur Benutzung von Skripts zu erhalten, indem man ein Basisicon in irgendeiner Form integriert, und auch eine einfache Lösung zur Benutzung eigener Icons bereitzustellen.

Wie schon erwähnt, momentan gibt es halt die base64 Icons in vielen Scripts, oder die Dateipfad Varianten für die Nutzung von eigenen Icons.
Die Fallback Geschichte könnte ein Zwischending sein, das beide Eventualitäten bedient.

Wobei ich mich nach einigen Versuchen jetzt doch frage, ob man damit mit Kanonen auf Spatzen schiesst.