È possibile sostituire le icone SVG predefinite di Discourse singolarmente o tutte insieme con le proprie icone SVG personalizzate e sovrascriverle all’interno di un tema o di un componente tema.
Passaggio 1 - Creare un foglio di sprite SVG
Per iniziare, è necessario creare un foglio di sprite SVG. Questo può contenere qualsiasi cosa, da una singola icona SVG personalizzata aggiuntiva a un’intera serie di sostituzione di centinaia di icone.
Il foglio di sprite deve essere salvato come file SVG. In linea di principio, si annidano i contenuti del tag <svg> dal file icona SVG originale all’interno di tag <symbol> e si assegna loro un bell’identificatore.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="my-theme-icon-1">
<!--
Codice all'interno del tag <svg> dal file icona SVG di origine
questo è tipicamente tutto ciò che si trova tra i tag <svg>
(ma non il tag SVG stesso, che è sostituito da <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. Aggiungere altri blocchi <symbol> se necessario.
-->
</symbol>
</svg>
-
Assicurati di aggiungere un ID personalizzato a ogni simbolo nel foglio di sprite. Probabilmente è utile per la tua sanità mentale anteporre il nome del tuo tema agli ID, ad esempio
my-theme-icon. -
Per far sì che il colore dell’icona sia dinamico come le icone esistenti, imposta il riempimento su
currentColoranziché su un colore fisso (come #333) -
Per scalare o centrare correttamente l’icona, utilizza un attributo
viewBoxsul tag<symbol>. Consulta How to Scale SVG | CSS-Tricks per maggiori informazioni. -
Fai attenzione alle collisioni di stile all’interno dei tuoi SVG. Ad esempio, gli SVG spesso hanno uno stile inline come
.st0{fill:#FF0000;}definito. Se hai più SVG che utilizzano le stesse classi, ciò può causare problemi (per risolvere questi problemi, modifica le classi in modo che siano univoche per ogni icona). -
Se hai molte icone, ci sono 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 di sprite.
Esempio - foglio di sprite con icona personalizzata singola
<?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>
Passaggio 2 - Aggiungere il foglio di sprite al tema
Una volta creato il foglio di sprite, è necessario aggiungere il file SVG al componente/tema. Questo è facile tramite l’interfaccia utente, oppure è possibile codificarlo direttamente in un componente/tema.
Una volta caricato in qualsiasi componente/tema installato, è disponibile in tutta l’istanza utilizzando l’ID nel tag
<symbol>.
Tramite l’interfaccia utente
Vai alla sezione Uploads delle impostazioni del tema/componente e aggiungi il tuo file sprite con un nome di variabile SCSS di icons-sprite:
Codifica diretta in un Tema / Componente
Aggiungi il file del foglio di sprite alla cartella /assets del tema. Quindi aggiorna il file assets.json nella cartella radice.
Per un file SVG sprite chiamato my-icons.svg, il tuo about.json dovrebbe includere questo:
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
Passaggio 3 (facoltativo) - Sovrascrivere le icone predefinite
Ora che il foglio di 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 icona predefinito in Discourse e il secondo è l’ID della tua icona di sostituzione. 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 (motivo per cui controllare l’ID nell’ispettore è il metodo più affidabile). È possibile visualizzare tutte le eccezioni nel blocco const REPLACEMENTS qui su github.
Questo è tutto. Ora puoi stilizzare Discourse con le tue icone personalizzate!
Questo documento è controllato in versione - suggerisci modifiche su github.
