アイコンの単一インスタンスを変更

特徴
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