Puede reemplazar los iconos SVG predeterminados de Discourse individualmente o en su totalidad con su propio SVG personalizado y anularlos dentro de un tema o componente de tema.
Paso 1 - Crear una Hoja de Sprites SVG
Para empezar, debe crear una Hoja de Sprites SVG. Esta puede contener cualquier cosa, desde un único icono SVG personalizado adicional hasta un conjunto de reemplazo completo de cientos.
La hoja de sprites debe guardarse como un archivo SVG. En principio, está anidando el contenido de la etiqueta <svg> del archivo de icono SVG original dentro de etiquetas <symbol> y dándoles un identificador agradable.
<?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 SVG de origen
esto es típicamente todo lo que está entre las etiquetas <svg>
(pero no la etiqueta SVG en sí, esa es reemplazada por <symbol> arriba)
Puede transferir cualquier atributo (es decir, ViewBox="0 0 0 0") a la etiqueta <symbol>
-->
</symbol>
<symbol id="my-theme-icon-2">
<!-- Código SVG aquí. Agregue más bloques <symbol> según sea necesario.
-->
</symbol>
</svg>
-
Asegúrese de agregar un ID personalizado a cada símbolo en la hoja de sprites. Probablemente sea útil para su cordura anteponer a sus ID el nombre de su tema, por ejemplo,
my-theme-icon. -
Para que el color del icono sea dinámico como los iconos existentes, establezca el
fillencurrentColoren lugar de un color codificado (como#333) -
Para escalar o centrar correctamente su icono, utilice un atributo
viewBoxen la etiqueta<symbol>. Consulte How to Scale SVG | CSS-Tricks para obtener más información. -
Esté atento a las colisiones de estilos dentro de sus SVG. Por ejemplo, los SVG a menudo tendrán un estilo en línea como
.st0{fill:#FF0000;}definido. Si tiene varios SVG que utilizan las mismas clases, esto puede causar problemas (para solucionar estos problemas, edite las clases para que sean únicas para cada icono). -
Si tiene muchos iconos, existen formas de automatizar esto. https://www.npmjs.com/package/svg-sprite-generator es una herramienta simple 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 - Agregar la hoja de sprites a su tema
Una vez que su hoja de sprites esté lista, debe agregar el archivo SVG a su componente/tema. Esto es fácil a través de la interfaz de usuario, o puede codificarlo en un componente/tema.
Una vez que se carga en cualquier componente/tema instalado, está disponible en toda su instancia utilizando el ID en la etiqueta
<symbol>.
A través de la interfaz de usuario
Vaya a la sección de Cargas (Uploads) de la configuración del tema/componente y agregue su archivo de sprite con un nombre de variable SCSS de icons-sprite:
Codificar en un Tema / Componente
Agregue el archivo de la hoja de sprites a la carpeta /assets del Tema. Luego actualice su archivo assets.json en la carpeta raíz.
Para un sprite SVG llamado my-icons.svg, su about.json debería incluir esto:
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
Paso 3 (opcional) - Anular iconos predeterminados
Ahora que su hoja de sprites está configurada, puede indicarle a Discourse que reemplace los iconos. Así es como se hace desde un inicializador de api:
// {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 de icono predeterminado en Discourse y el segundo es el ID de su icono de reemplazo. La forma más fácil de encontrar un ID de uno de nuestros iconos es inspeccionar el icono en su navegador.
Aquí, el nombre del icono sigue el prefijo d-icon-. Entonces, 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 verificar el ID en su inspector es el método más confiable). Puede ver todas las excepciones en el bloque const REPLACEMENTS aquí en github.
Eso es todo. ¡Ahora puede dar estilo a Discourse con sus propios iconos personalizados!
Este documento está controlado por versiones: sugiera cambios en github.
