Modificare le icone globalmente

[Discourse]

Questo è un metodo semplice per modificare un’icona Discourse a livello globale.

1. Fare clic destro sull’icona che si desidera modificare e selezionare “Ispeziona elemento” o “Ispeziona” (dipende dal browser)

2. Trovare il nome dell’icona
   

   

3. Cercare una nuova icona qui Find Icons with the Perfect Look & Feel | Font Awesome, ad esempio external-link-alt

4. Personalizzare e aggiungere il codice nella scheda 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. Le icone che non sono utilizzate di default da Discourse devono essere aggiunte nell’impostazione del sito svg icon subset e quindi forzare l’aggiornamento del browser per vedere le modifiche applicate.
   Risultato:
   
   Tutte le icone “link” verranno sostituite da “external-link-tab”.
   Se un’icona è utilizzata per più elementi in altre pagine, come i badge, l’icona verrà sostituita anche lì.

---

Eccezioni

Note che esiste già un componente del tema che ti permette di cambiare l’icona Like. Sto usando questo caso come esempio

L’icona “heart”, utilizzata per dare Like, è hardcoded con altri nomi ('d-liked' e 'd-unliked') e dovrebbe essere trattata diversamente rispetto ad altre icone, quindi per cambiare l’icona con l’icona :

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

ma nella pagina dei badge l’icona è ancora “heart”:

quindi per cambiarla in quella pagina aggiungiamo:

api.replaceIcon("heart", "thumbs-up");

Un altro esempio:

api.replaceIcon("d-watching", "eye");

cambia l’icona di visualizzazione:

Vedi qui altre eccezioni che coprono lo stato di tracciamento, espandi/collassa, notifiche e like naturalmente.

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",
};

Ref: discourse/icon-library.js at main · discourse/discourse (github.com)

---

Sentitevi liberi di creare altri componenti del tema e condividerli nella nostra categoria Customization > Theme component!

---

Questo documento è sotto controllo versione - suggerisci modifiche su github.