Changer les icônes globalement

[Discourse]

C’est un moyen simple de modifier une icône Discourse de manière globale.

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 Find Icons with the Perfect Look & Feel | Font Awesome, par exemple external-link-alt

4. Personnalisez et ajoutez le code dans votre 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 modifications appliquées.
   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 là-bas.

---

Exceptions

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

L’icône “heart”, utilisée pour donner un Like, 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, donc pour remplacer 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 modifier sur cette page, nous ajoutons :

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

Un autre exemple :

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

modifie l’icône de surveillance :

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

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 Customization > Theme component !

---

Ce document est versionné - suggérez des modifications sur github.