Cambiar iconos globalmente

[Discourse]

Esta es una forma fácil de cambiar un icono de Discourse globalmente.

1. Haz clic derecho en el icono que quieras 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 tu 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 usan por defecto en Discourse deben añadirse en la configuración del sitio svg icon subset y luego forzar la actualización de tu navegador para ver los cambios aplicados.
   Resultado:
   
   Todos los iconos “link” se reemplazarán por “external-link-tab”.
   Si un icono se usa para múltiples elementos en otras páginas, como insignias, el icono también se reemplazará allí.

---

Excepciones

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

El icono “heart”, usado para dar Me gusta, está codificado con otros nombres ('d-liked' y 'd-unliked') y debe tratarse de manera diferente a otros iconos, así 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 “heart”:

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:

Ver aquí otras excepciones que cubren el estado de seguimiento, expandir/colapsar, notificaciones y me gusta, por supuesto.

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)

---

¡Siéntete libre de crear otros componentes de temas y compartirlos en nuestra categoría Customization > Theme component!

---

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