グローバルにアイコンを変更する

[Discourse]

これは、Discourse のアイコンをグローバルに変更する簡単な方法です。

1. 変更したいアイコンを右クリックし、「要素を検証」または「検証」（ブラウザによって異なります）を選択します。

2. アイコン名を見つけます
   

   

3. ここで新しいアイコンを検索します Find Icons with the Perfect Look & Feel | Font Awesome

4. 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");
});

5. デフォルトで Discourse によって使用されていないアイコンは、サイト設定の svg icon subset に追加し、ブラウザを強制的に更新して変更を適用する必要があります。
   結果:
   
   すべての「link」アイコンが「external-link-tab」に置き換えられます。
   アイコンがバッジなどの他のページで複数の要素に使用されている場合、そのアイコンもそこで置き換えられます。

---

例外

「いいね」アイコンを変更できるテーマコンポーネントがすでに存在することに注意してください (Change the Like icon)。ここではこのケースを例として使用します

「いいね」を付けるために使用される「heart」アイコンは、他の名前 ('d-liked' および 'd-unliked') でハードコーディングされており、他のアイコンとは異なる扱いをする必要があります。そのため、:heart: アイコンを :+1: アイコンに変更するには:

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 アイコンが変更されます:

トラッキングステータス、展開/折りたたみ、通知、そしてもちろん「いいね」をカバーするその他の例外をここで確認してください。

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)

---

他のテーマコンポーネントを作成して、Theme component カテゴリで共有してください！

---

このドキュメントはバージョン管理されています - 変更の提案はgithubで行ってください。