Einzelne Instanz des Symbols ändern

Merkmal
15

Danke für den Hinweis – Sie haben absolut Recht. Die alleinige Verwendung von api.onPageChange kann unzuverlässig sein, da sie bei Routenänderungen und nicht nach dem DOM-Rendering ausgelöst wird. Das bedeutet, dass die Gefahr einer Race Condition besteht, bei der der Button #create-topic möglicherweise noch nicht existiert, wenn das Skript versucht, darauf zuzugreifen.

 api.onPageChange(() => {
        const targetSelector = "#create-topic";

        const tryEnhanceButton = () => {
            const button = document.querySelector(targetSelector);

            if (button) {
                // Beobachter trennen, nachdem das Element gefunden wurde
                observer.disconnect();

                // Den Button vorübergehend ausblenden, während wir das Icon ersetzen
                button.style.display = "none";

                // Altes Icon entfernen, falls vorhanden
                const oldIcon = button.querySelector("svg");
                if (oldIcon) oldIcon.remove();

                // Neues Font Awesome SVG-Icon erstellen und einfügen
                const newIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                newIcon.setAttribute("class", "fa d-icon d-icon-feather-pointed svg-icon svg-string");
                newIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
                newIcon.innerHTML = '<use href="#feather-pointed"></use>';

                button.insertBefore(newIcon, button.firstChild);

                // Den Button wieder anzeigen
                button.style.display = "block";
            }
        };

        // Änderungen am DOM beobachten und versuchen, den Button zu verbessern, wenn er hinzugefügt wird
        const observer = new MutationObserver(() => tryEnhanceButton());
        observer.observe(document.body, { childList: true, subtree: true });

        // Sofort versuchen, da es möglicherweise bereits vorhanden ist
        tryEnhanceButton();
    });

@Don Ich habe MutationObserver eingebunden, um sicherzustellen, dass das Skript nur ausgeführt wird, wenn das Ziel-Element tatsächlich existiert. Es trennt sich selbst, nachdem es seine Aufgabe erfüllt hat, um unnötigen Overhead zu vermeiden. Es wird immer noch ein sofortiger Check versucht, falls das Element bereits vorhanden ist.

Ich kann das gewünschte SVG nicht aus dem Discourse-Icon-System abrufen, obwohl ich es als Admin-SVG-Icon-Subset registriert habe, da es anscheinend in Fontawesome, aber nicht in Discourse vorhanden ist.

1 „Gefällt mir“