Changer les icônes globalement

[Discourse]

Ceci est un moyen simple de changer une icône Discourse globalement.

1. Faites un clic droit sur l’icône que vous souhaitez modifier et sélectionnez « Inspecter l’élément » ou « Inspecter » (selon le navigateur)

2. Trouvez le nom de l’icône
   

3. Recherchez une nouvelle icône ici https://fontawesome.com/icons?d=gallery, par exemple external-link-alt

4. Personnalisez et ajoutez le code dans l’onglet 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. Les icônes qui ne sont pas utilisées par défaut par Discourse doivent être ajoutées dans le paramètre du site svg icon subset, puis forcez le rafraîchissement de votre navigateur pour voir les changements appliqués.
   Résultat :
   
   Toutes les icônes « link » seront remplacées par « external-link-tab ».
   Si une icône est utilisée pour plusieurs éléments sur d’autres pages, comme les badges, l’icône sera également remplacée à cet endroit.

---

Exceptions

Notez qu’il existe déjà un composant de thème qui vous permet de changer l’icône J’aime. J’utilise ce cas comme exemple.

L’icône « heart », utilisée pour donner un J’aime, est codée en dur avec d’autres noms ('d-liked' et 'd-unliked') et doit être traitée différemment des autres icônes. Ainsi, pour changer l’icône par l’icône :

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

mais sur la page des badges, l’icône est toujours « heart » :

donc pour la changer sur cette page, nous ajoutons :

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

Un autre exemple :

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

change l’icône de suivi :

Voir ici d'autres exceptions qui couvrent le statut de suivi, l'expansion/réduction, les notifications et les likes bien sûr.

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

Réf : discourse/icon-library.js at main · discourse/discourse (github.com)

---

N’hésitez pas à créer d’autres composants de thème et à les partager dans notre catégorie Theme component !

---

Ce document est contrôlé par version - suggérez des modifications sur github.