È possibile sostituire singolarmente o in blocco le icone SVG predefinite di Discourse con icone SVG personalizzate, sovrascrivendole all’interno di un tema o di un componente di tema.
Passo 1 - Creare un foglio sprite SVG
Per iniziare, è necessario creare un foglio sprite SVG (SVG Spritesheet). Questo può contenere qualsiasi cosa, da una singola icona SVG personalizzata aggiuntiva a un intero set sostitutivo composto da centinaia di icone.
Il foglio sprite deve essere salvato come file SVG. In linea di principio, si annidano i contenuti del tag <svg> del file di icona SVG originale all’interno di tag <symbol> assegnando loro un identificativo descrittivo.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="my-theme-icon-1">
<!--
Il codice all'interno del tag <svg> del file di icona SVG sorgente
di solito si tratta di tutto ciò che si trova tra i tag <svg>
(ma non il tag SVG stesso, che viene sostituito dal <symbol> sopra)
È possibile trasferire qualsiasi attributo (ad esempio ViewBox="0 0 0 0") al tag <symbol>
-->
</symbol>
<symbol id="my-theme-icon-2">
<!-- Codice SVG qui. Aggiungi più blocchi <symbol> se necessario.
-->
</symbol>
</svg>
-
Assicurati di aggiungere un ID personalizzato a ciascun simbolo nel foglio sprite. Probabilmente ti sarà utile per la sanità mentale prefissare i tuoi ID con il nome del tuo tema
my-theme-icon. -
Per rendere il colore dell’icona dinamico come le icone esistenti, imposta il riempimento su
currentColoranziché su un colore fisso (come #333) -
Per ridimensionare o centrare correttamente la tua icona, utilizza l’attributo
viewBoxsul tag<symbol>. Consulta How to Scale SVG | CSS-Tricks per ulteriori informazioni. -
Fai attenzione a possibili collisioni di stili all’interno dei tuoi SVG. Ad esempio, gli SVG spesso hanno uno stile inline definito come
.st0{fill:#FF0000;}. Se hai più SVG che utilizzano le stesse classi, questo può causare problemi (per risolvere questi problemi, modifica le classi per renderle uniche per ciascuna icona). -
Se hai molte icone, esistono modi per automatizzare questo processo. https://www.npmjs.com/package/svg-sprite-generator è un semplice strumento da riga di comando per combinare SVG in un foglio sprite.
Esempio - foglio sprite con una singola icona personalizzata
<?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>
Passo 2 - Aggiungere il foglio sprite al tuo tema
Una volta creato il foglio sprite, è necessario aggiungere il file SVG al tuo componente/tema. Questo è facile da fare tramite l’interfaccia utente, oppure puoi codificarlo direttamente in un componente/tema.
Una volta caricato in qualsiasi componente/tema installato, sarà disponibile in tutta la tua istanza utilizzando l’ID nel tag
<symbol>.
Tramite l’interfaccia utente
Vai alla sezione Caricamenti delle impostazioni del tema/componente e aggiungi il tuo file sprite con un nome di variabile SCSS icons-sprite:
Codifica diretta in un Tema / Componente
Aggiungi il file del foglio sprite alla cartella /assets del Tema. Quindi aggiorna il file assets.json nella cartella principale.
Per uno sprite SVG chiamato my-icons.svg, il tuo about.json dovrebbe includere questo:
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
Passo 3 (facoltativo) - Sovrascrittura delle icone predefinite
Ora che il tuo foglio sprite è impostato, puoi dire a Discourse di sostituire le icone. Ecco come farlo da 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");
// ecc.
});
Il primo ID, bars, è l’ID dell’icona predefinita in Discourse e il secondo è l’ID della tua icona sostitutiva. Il modo più semplice per trovare l’ID di una delle nostre icone è ispezionare l’icona nel browser.
Qui il nome dell’icona segue il prefisso d-icon-. Quindi in questo esempio è d-unliked
La maggior parte delle nostre icone segue i nomi delle icone da https://fontawesome.com/, ma ci sono eccezioni (ecco perché controllare l’ID nel tuo ispettore è il metodo più affidabile). Puoi vedere tutte le eccezioni nel blocco const REPLACEMENTS qui su github.
Ecco fatto. Ora puoi personalizzare lo stile di Discourse con le tue icone personalizzate!
Questo documento è sottoposto a controllo di versione - suggerisci modifiche su github.