こんにちは。
レビューページにあるチェックアイコンのみを置き換えたいと考えています。場所は以下の通りです。
<span class="approved">
<svg class="fa d-icon d-icon-check svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
<use href="#check"></use>
</svg>
Approved
</span>
もし api.replaceIcon('check', 'full-circle-icon'); を使用すると、フォーラムのすべてのチェックがフルサークルに置き換えられてしまいます。
しかし、他のページにあるアイコンは置き換えしたくありません。
どのように修正すればよろしいでしょうか？ご回答よろしくお願いいたします。
試していないので100%確実ではありませんが、JavaScriptで現在のページを取得し、それがレビューページかどうかを確認してから、コードでアイコンを変更できるかもしれません。
メタ（meta）でAPIを使用して現在いるページを取得するJavaScriptの例があったと記憶していますが、見つけられませんでした。
あるいは、/review にいるかどうかを確認するために、現在のURLを返すだけでも良いかもしれません。
これを試しました：
api.onPageChange((url) => {
if (window.location.href.indexOf("review") > -1) {
api.replaceIcon('check', 'full-circle-icon');
}
}
しかし、動作しません…
このエラーが出ています：
SyntaxError: /discourse/theme-35/initializers/theme-field-379-common-html-script-1: Unexpected token, expected “,” (97:5)
何か間違えましたか？
コードの最後に ); を付け忘れているため、エラーが発生しています。
以下のようなコードで動作するはずです（URIの解析については、多くの方法があるので気にしないでください）。
api.onPageChange((url) => {
if (location.pathname.split('/')[1] == "review") {
api.replaceIcon('check', 'full-circle-icon');
}
});
ただし、onPageChange は最初のページ読み込み時にはトリガーされないことに注意してください。ブラウザで直接 yourforum/reviews を開いた場合、onPageChange はトリガーされず、アイコンは置き換えられません。
最初のページ読み込み時とページ変更時の両方でアイコンを変更する方法はわかりません。APIメソッドがあるかもしれませんが、見つけられませんでした。
さらに、アイコンを変更すると、ナビゲーション時に他のページでも変更されたままになるため、URLが /review でない場合はアイコンの変更を元に戻す必要があります。
要するに…完全に機能させるには、もう少し作業が必要だと思います。私はDiscourseのコードやJavaScriptの専門家ではないことに注意してください。より知識のある人がさらに助けてくれるかもしれません。
編集：最初のレビューに移動したときにコードが機能しないのは、ページが読み込まれ、アイコンが動的に変更されないためだと思います。したがって、別の方法を見つける必要があります。これ以上お手伝いできず申し訳ありません。
それをどうやるか知っていますか？
こんにちは。
CSSソリューションも作成しました。 
デフォルトのチェックアイコンを非表示にし、::before疑似要素にカスタムアイコンを追加します。
新しいテーマコンポーネントを作成します。
アイコンをアップロードセクションにアップロードし、SCSS変数名を追加します: review-approved-icon
「CSS/HTMLを編集」ボタンをクリックし、共通 / CSSセクションに次のコードを貼り付けます。
.reviewable {
.status span.approved {
position: relative;
&:before {
content: url($review-approved-icon);
width: 13px;
height: 13px;
top: 0px;
position: absolute;
// var(--success) ライトスキームカラー #090 (カスタムアイコンカラー)
// 新しいライトカラーフィルターはここで計算できます: https://codepen.io/sosuke/pen/Pjoqqp
filter: invert(35%) sepia(92%) saturate(1240%) hue-rotate(91deg) brightness(89%) contrast(104%);
@media (prefers-color-scheme: dark) {
// var(--success) ダークスキームカラー #1ca551 (カスタムアイコンカラー)
// 新しいダークカラーフィルターはここで計算できます: https://codepen.io/sosuke/pen/Pjoqqp
filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
}
}
.d-icon {
visibility: hidden;
}
}
}
.reviewable {
.status span.approved {
position: relative;
&:before {
content: url($review-approved-icon);
width: 13px;
height: 13px;
top: 0px;
position: absolute;
}
.d-icon {
visibility: hidden;
}
}
}
このオプションを選択した場合、異なる色のアイコンを2つアップロードする必要があります。
SCSS変数名: review-approved-icon-light および review-approved-icon-dark
.reviewable {
.status span.approved {
position: relative;
&:before {
content: url($review-approved-icon-light);
@media (prefers-color-scheme: dark) {
content: url($review-approved-icon-dark);
}
width: 13px;
height: 13px;
top: 0px;
position: absolute;
}
.d-icon {
visibility: hidden;
}
}
}
