Cambiar una sola instancia de icono

Característica
15

Gracias por señalarlo; tienes toda la razón. Usar solo api.onPageChange puede ser poco fiable, ya que se activa al cambiar de ruta, no después de que el DOM se haya renderizado. Esto significa que existe el riesgo de una condición de carrera en la que el botón #create-topic podría no existir todavía cuando el script intente acceder a él.

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

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

            if (button) {
                // Desconectar el observador después de encontrar el elemento
                observer.disconnect();

                // Ocultar temporalmente el botón mientras reemplazamos el icono
                button.style.display = "none";

                // Eliminar el icono antiguo si existe
                const oldIcon = button.querySelector("svg");
                if (oldIcon) oldIcon.remove();

                // Crear e insertar el nuevo icono SVG de Font Awesome
                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);

                // Volver a mostrar el botón
                button.style.display = "block";
            }
        };

        // Observar los cambios en el DOM e intentar mejorar el botón cuando se añada
        const observer = new MutationObserver(() => tryEnhanceButton());
        observer.observe(document.body, { childList: true, subtree: true });

        // Intentar inmediatamente también en caso de que ya esté allí
        tryEnhanceButton();
    });

@Don He incluido MutationObserver para asegurar que el script solo se ejecute una vez que el elemento objetivo exista realmente, y se desconecta después de hacer su trabajo para evitar sobrecarga innecesaria. Aún así, intenta una comprobación inmediata en caso de que el elemento ya exista.

No puedo obtener el SVG que quiero del sistema de iconos de Discourse, aunque lo registré en el subconjunto de iconos SVG de administrador, ya que parece estar en fontawesome pero no en discourse.

1 me gusta