تغيير الأيقونات عالميًا

[Discourse]

هذه طريقة سهلة لتغيير أيقونة Discourse على مستوى الموقع.

1. انقر بزر الماوس الأيمن على الأيقونة التي تريد تغييرها وحدد “فحص العنصر” (Inspect element) أو “فحص” (Inspect) (حسب المتصفح)

2. ابحث عن اسم الأيقونة
   

3. ابحث عن أيقونة جديدة هنا https://fontawesome.com/icons?d=gallery، على سبيل المثال external-link-alt

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”.
   إذا تم استخدام أيقونة لعناصر متعددة في صفحات أخرى، مثل الشارات، فسيتم استبدال الأيقونة هناك أيضًا.

---

استثناءات

لاحظ أنه يوجد بالفعل مكون سمة يسمح لك بتغيير أيقونة الإعجاب. أنا أستخدم هذه الحالة كمثال

أيقونة “القلب” (heart)، المستخدمة للإعجاب، مبرمجة بشكل ثابت بأسماء أخرى ('d-liked' و 'd-unliked') ويجب التعامل معها بشكل مختلف عن الأيقونات الأخرى، لذا لتغيير أيقونة إلى أيقونة :

api.replaceIcon("d-liked", "thumbs-up");
api.replaceIcon("d-unliked", "thumbs-o-up");

ولكن في صفحة الشارات تظل الأيقونة “قلب”:

لذلك لتغييرها في تلك الصفحة نضيف:

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.