Alterar uma única instância de ícone

Funcionalidade
15

Obrigado por apontar isso — você está absolutamente certo. Usar apenas api.onPageChange pode ser não confiável, pois ele é acionado na mudança de rota, não após a renderização do DOM. Isso significa que há um risco de condição de corrida em que o botão #create-topic pode ainda não existir quando o script tentar acessá-lo.

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

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

            if (button) {
                // Desconecta o observador após encontrar o elemento
                observer.disconnect();

                // Oculta temporariamente o botão enquanto substituímos o ícone
                button.style.display = "none";

                // Remove o ícone antigo, se existir
                const oldIcon = button.querySelector("svg");
                if (oldIcon) oldIcon.remove();

                // Cria e insere o novo ícone SVG do 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);

                // Mostra o botão novamente
                button.style.display = "block";
            }
        };

        // Observa as mudanças no DOM e tenta aprimorar o botão quando ele for adicionado
        const observer = new MutationObserver(() => tryEnhanceButton());
        observer.observe(document.body, { childList: true, subtree: true });

        // Tenta imediatamente também, caso já esteja lá
        tryEnhanceButton();
    });

@Don Incluí o MutationObserver para garantir que o script só seja executado quando o elemento de destino realmente existir, ele se desconecta após cumprir sua função para evitar sobrecarga desnecessária. Ele ainda tenta uma verificação imediata caso o elemento já exista.

Não consigo buscar o SVG que desejo do sistema de ícones do Discourse, embora eu o tenha registrado como um subconjunto de ícones SVG de administrador, pois parece que ele está no fontawesome, mas não no discourse.

1 curtida