更改单个图标实例

功能
15

感谢您的指正——您说得完全正确。仅使用 api.onPageChange 可能会不可靠，因为它在路由更改时触发，而不是在 DOM 渲染后触发。这意味着存在竞态条件风险，即当脚本尝试访问 #create-topic 按钮时，该按钮可能尚不存在。

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

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

            if (button) {
                // 找到元素后断开观察器连接
                observer.disconnect();

                // 暂时隐藏按钮，以便我们替换图标
                button.style.display = "none";

                // 删除旧图标（如果存在）
                const oldIcon = button.querySelector("svg");
                if (oldIcon) oldIcon.remove();

                // 创建并插入新的 Font Awesome SVG 图标
                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);

                // 重新显示按钮
                button.style.display = "block";
            }
        };

        // 观察 DOM 更改，并在添加目标元素时尝试增强按钮
        const observer = new MutationObserver(() => tryEnhanceButton());
        observer.observe(document.body, { childList: true, subtree: true });

        // 立即尝试，以防元素已存在
        tryEnhanceButton();
    });

@Don 我已包含 MutationObserver 以确保脚本仅在目标元素实际存在时运行，它会在完成工作后自行断开连接，以避免不必要的开销。它仍然会尝试立即检查，以防元素已存在。

我无法从 Discourse 图标系统中获取我想要的 SVG，尽管我已将其注册为管理员 SVG 图标子集，因为它似乎在 Font Awesome 中，但不在 Discourse 中。

1 个赞