Puedes reemplazar los iconos SVG predeterminados de Discourse individualmente o en su totalidad con tus propios SVG personalizados y sobrescribirlos dentro de un tema o componente de tema.
Paso 1 - Crear una hoja de sprites SVG
Para comenzar, debes crear una hoja de sprites SVG. Esta puede contener desde un solo icono SVG personalizado adicional hasta un conjunto completo de reemplazo con cientos de iconos.
La hoja de sprites debe guardarse como un archivo SVG. En principio, se anida el contenido de la etiqueta <svg> del archivo de icono SVG original dentro de etiquetas <symbol> y se les asigna un identificador descriptivo.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="my-theme-icon-1">
<!--
Código dentro de la etiqueta <svg> del archivo de icono SVG de origen
esto suele ser todo lo que hay entre las etiquetas <svg>
(pero no la propia etiqueta SVG, que es reemplazada por <symbol> arriba)
Puedes transferir cualquier atributo (p. ej., ViewBox="0 0 0 0") a la etiqueta <symbol>
-->
</symbol>
<symbol id="my-theme-icon-2">
<!-- Código SVG aquí. Añade más bloques <symbol> según sea necesario.
-->
</symbol>
</svg>
-
Asegúrate de añadir un ID personalizado a cada símbolo en la hoja de sprites. Probablemente te resulte útil prefijar tus IDs con el nombre de tu tema
my-theme-icon. -
Para que el color del icono sea dinámico, como los iconos existentes, establece el relleno en
currentColoren lugar de un color fijo (como #333). -
Para escalar o centrar correctamente tu icono, utiliza el atributo
viewBoxen la etiqueta<symbol>. Consulta How to Scale SVG | CSS-Tricks para obtener más información. -
Esté atento a posibles conflictos de estilos dentro de tus SVG. Por ejemplo, los SVG a menudo tienen un estilo en línea como
.st0{fill:#FF0000;}definido. Si tienes múltiples SVG que utilizan las mismas clases, esto puede causar problemas (para corregir estos problemas, edita las clases para que sean únicas para cada icono). -
Si tienes muchos iconos, hay formas de automatizar esto. https://www.npmjs.com/package/svg-sprite-generator es una simple herramienta de línea de comandos para combinar SVG en una hoja de sprites.
Ejemplo - hoja de sprites de un solo icono personalizado
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bat-icon" viewBox="6 6 36 36">
<path
fill="currentColor"
d="M24,18.2c0.7,0,0.9,0.2,0.9,0.2l0.4-1.7c0,0,0.4,1.5,0.4,2.8c0.2,1.1,2.2,0.4,3.9,0C31.4,19.1,32,16,32,16h16c0,0-9.4,3.5-7,10c0,0-14.8-2-17,7l0,0c-2.2-9-17-7-17-7c2.4-6.5-7-10-7-10h16c0,0,0.6,3.1,2.3,3.5c1.7,0.4,3.9,1.1,3.9,0c0.2-1.1,0.4-2.8,0.4-2.8l0.4,1.7C23.1,18.4,23.4,18.2,24,18.2L24,18.2L24,18.2z"
/>
</symbol>
</svg>
Paso 2 - Añadir la hoja de sprites a tu tema
Una vez que tu hoja de sprites esté lista, necesitas añadir el archivo SVG a tu componente/tema. Esto es fácil a través de la interfaz de usuario, o puedes codificarlo directamente en un componente/tema.
Una vez que se carga en cualquier componente/tema instalado, está disponible en toda tu instancia usando el ID de la etiqueta
<symbol>.
A través de la interfaz de usuario
Ve a la sección de Subidas (Uploads) de la configuración del tema/componente y añade tu archivo de sprite con un nombre de variable SCSS de icons-sprite:
Codificación directa en un Tema / Componente
Añade el archivo de la hoja de sprites a la carpeta /assets del Tema. Luego actualiza tu archivo assets.json en la carpeta raíz.
Para un sprite SVG llamado my-icons.svg, tu about.json debe incluir esto:
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
Paso 3 (opcional) - Sobrescribir iconos predeterminados
Ahora que tu hoja de sprites está configurada, puedes indicar a Discourse que reemplace iconos. Así es como se hace desde un api-initializer:
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.replaceIcon("bars", "my-theme-icon-bars");
api.replaceIcon("link", "my-theme-icon-link");
// etc.
});
El primer ID, bars, es el ID del icono predeterminado en Discourse y el segundo es el ID de tu icono de reemplazo. La forma más fácil de encontrar el ID de uno de nuestros iconos es inspeccionar el icono en tu navegador.
Aquí, el nombre del icono sigue el prefijo d-icon-. Así que en este ejemplo es d-unliked.
La mayoría de nuestros iconos siguen los nombres de iconos de https://fontawesome.com/, pero hay excepciones (por eso, revisar el ID en tu inspector es el método más confiable). Puedes ver todas las excepciones en el bloque const REPLACEMENTS aquí en github.
Eso es todo. Ahora puedes dar estilo a Discourse con tus propios iconos personalizados!
Este documento está bajo control de versiones - sugiere cambios en github.
