Cambiar iconos globalmente

[Discourse]

Este es un método sencillo para cambiar un icono de Discourse globalmente.

1. Haz clic derecho en el icono que deseas cambiar y selecciona “Inspeccionar elemento” o “Inspeccionar” (depende del navegador)

2. Encuentra el nombre del icono
   

   

3. Busca un nuevo icono aquí Find Icons with the Perfect Look & Feel | Font Awesome, por ejemplo external-link-alt

4. Personaliza y añade el código en la pestaña 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. Los iconos que no se utilizan por defecto en Discourse deben añadirse en la configuración del sitio svg icon subset y luego forzar la actualización del navegador para ver los cambios aplicados.
   Resultado:
   
   Todos los iconos de “enlace” se reemplazarán por “external-link-tab”.
   Si un icono se utiliza para varios elementos en otras páginas, como insignias, el icono también se reemplazará allí.

---

Excepciones

Ten en cuenta que ya existe un componente de tema que te permite cambiar el icono de Me gusta. Estoy usando este caso como ejemplo.

El icono “corazón”, utilizado para dar “Me gusta”, está codificado con otros nombres ('d-liked' y 'd-unliked') y debe tratarse de manera diferente a otros iconos, por lo que para cambiar el icono por el icono :

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

pero en la página de insignias el icono sigue siendo “corazón”:

así que para cambiarlo en esa página añadimos:

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

Otro ejemplo:

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

cambia el icono de seguimiento:

[details=“Ver aquí otras excepciones que cubren el estado de seguimiento, expandir/colapsar, notificaciones y, por supuesto, los “me gusta”.”]

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)
[/details]

---

¡No dudes en crear otros componentes de tema y compartirlos en nuestra categoría Theme component!

---

Este documento está controlado por versiones: sugiere cambios en github.