Discourse のアイコンをグローバルに変更する簡単な方法です。
-
変更したいアイコンを右クリックし、「要素を検証」または「Inspect」（ブラウザによって異なります）を選択します。
-
アイコン名を見つけます
-
Find Icons with the Perfect Look & Feel | Font Awesome で新しいアイコンを検索します。例: external-link-alt
-
admin > customize > themes > edit code -> JSタブでコードをカスタマイズして追加します
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.replaceIcon("link", "external-link-tab");
});
- Discourse でデフォルトでは使用されていないアイコンは、サイト設定の
svg icon subsetに追加する必要があります。その後、ブラウザを強制リフレッシュすると変更が適用されます。
結果:
すべての “link” アイコンが “external-link-tab” に置き換えられます。
バッジなど、他のページで複数の要素に使用されているアイコンの場合、そちらでもアイコンが置き換えられます。
例外
「Like」アイコンを変更できるテーマコンポーネントがすでに存在することに注意してください。Like アイコンの変更をこのケースの例として使用しています
Like を付与するために使用される “heart” アイコンは、他の名前（'d-liked' と 'd-unliked'）でハードコードされており、他のアイコンとは異なる扱いが必要です。したがって、
アイコンを 
アイコンに変更するには：
api.replaceIcon("d-liked", "thumbs-up");
api.replaceIcon("d-unliked", "thumbs-o-up");
ただし、バッジページではアイコンは依然として “heart” です：
そのため、そのページで変更するには以下を追加します：
api.replaceIcon("heart", "thumbs-up");
もう一つの例：
api.replaceIcon("d-watching", "eye");
watching アイコンを変更します：
追跡ステータス、展開/折りたたみ、通知、そして当然ながら Like をカバーする他の例外については、こちらをご覧ください。
const REPLACEMENTS = {
"d-tracking": "bell",
"d-muted": "discourse-bell-slash",
"d-regular": "far-bell",
"d-watching": "discourse-bell-exclamation",
"d-watching-first": "discourse-bell-one",
"d-drop-expanded": "caret-down",
"d-drop-collapsed": "caret-right",
"d-unliked": "far-heart",
"d-liked": "heart",
"d-post-share": "link",
"d-topic-share": "link",
"notification.mentioned": "at",
"notification.group_mentioned": "users",
"notification.quoted": "quote-right",
"notification.replied": "reply",
"notification.posted": "reply",
"notification.edited": "pencil-alt",
"notification.bookmark_reminder": "discourse-bookmark-clock",
"notification.liked": "heart",
"notification.liked_2": "heart",
"notification.liked_many": "heart",
"notification.liked_consolidated": "heart",
"notification.private_message": "far-envelope",
"notification.invited_to_private_message": "far-envelope",
"notification.invited_to_topic": "hand-point-right",
"notification.invitee_accepted": "user",
"notification.moved_post": "sign-out-alt",
"notification.linked": "link",
"notification.granted_badge": "certificate",
"notification.topic_reminder": "far-clock",
"notification.watching_first_post": "discourse-bell-one",
"notification.group_message_summary": "users",
"notification.post_approved": "check",
"notification.membership_request_accepted": "user-plus",
"notification.membership_request_consolidated": "users",
"notification.reaction": "bell",
"notification.votes_released": "plus",
"notification.chat_quoted": "quote-right",
};
参照: discourse/icon-library.js at main · discourse/discourse (github.com)
他のテーマコンポーネントを作成し、Customization > Theme component カテゴリで共有してください！
このドキュメントはバージョン管理されています - 変更提案は github でどうぞ。
