Du kannst die Standard-SVG-Icons von Discourse einzeln oder komplett durch eigene benutzerdefinierte SVGs ersetzen und sie innerhalb eines Themes oder Theme-Komponenten überschreiben.
Schritt 1 – Erstellen eines SVG-Spritesheets
Um zu beginnen, musst du ein SVG-Spritesheet erstellen. Dieses kann alles enthalten, von einem einzelnen zusätzlichen benutzerdefinierten SVG-Icon bis hin zu einem kompletten Ersatzsatz aus Hunderten von Icons.
Das Spritesheet sollte als SVG-Datei gespeichert werden. Im Prinzip verschachtelst du den Inhalt des <svg>-Tags aus der ursprünglichen SVG-Icon-Datei in <symbol>-Tags und gibst ihnen eine passende Kennung.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="my-theme-icon-1">
<!--
Code innerhalb des <svg>-Tags aus der Quelldatei des SVG-Icons
Dies ist in der Regel alles zwischen den <svg>-Tags
(aber nicht das SVG-Tag selbst, das wird oben durch <symbol> ersetzt)
Du kannst beliebige Attribute (z. B. ViewBox="0 0 0 0") auf das <symbol>-Tag übertragen
-->
</symbol>
<symbol id="my-theme-icon-2">
<!-- SVG-Code hier. Füge weitere <symbol>-Blöcke hinzu, wie benötigt.
-->
</symbol>
</svg>
-
Vergewissere dich, dass du jedem Symbol im Spritesheet eine benutzerdefinierte ID hinzufügst. Es ist wahrscheinlich hilfreich für deinen Verstand, deine IDs mit deinem Theme-Namen zu prefixen, z. B.
my-theme-icon. -
Damit die Icon-Farbe dynamisch ist wie bei den vorhandenen Icons, setze die Füllung auf
currentColoranstelle einer hartkodierten Farbe (wie #333). -
Um dein Icon zu skalieren oder korrekt zu zentrieren, nutze ein
viewBox-Attribut auf dem<symbol>-Tag. Siehe How to Scale SVG | CSS-Tricks für weitere Informationen. -
Achte auf Stil-Kollisionen innerhalb deiner SVGs. Zum Beispiel haben SVGs oft einen Inline-Stil wie
.st0{fill:#FF0000;}definiert. Wenn du mehrere SVGs mit denselben Klassen verwendest, kann dies zu Problemen führen (um diese Probleme zu beheben, bearbeite die Klassen, damit sie für jedes Icon eindeutig sind). -
Wenn du viele Icons hast, gibt es Möglichkeiten, dies zu automatisieren. https://www.npmjs.com/package/svg-sprite-generator ist ein einfaches Befehlszeilenwerkzeug zum Kombinieren von SVGs in ein Spritesheet.
Beispiel – Spritesheet mit einem einzelnen benutzerdefinierten Icon
<?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>
Schritt 2 – Das Spritesheet zu deinem Theme hinzufügen
Sobald dein Spritesheet erstellt ist, musst du die SVG-Datei zu deiner Komponente/deinem Theme hinzufügen. Dies ist über die Benutzeroberfläche einfach möglich, oder du kannst es hartkodiert in eine Komponente/ein Theme einfügen.
Sobald es zu einer installierten Komponente/einem Theme hochgeladen wurde, ist es über die gesamte Instanz hinweg mit der ID im
<symbol>-Tag verfügbar.
Über die Benutzeroberfläche
Gehe zum Abschnitt „Uploads“ in den Einstellungen des Themes/des Komponenten und füge deine Sprite-Datei mit einem SCSS-Variablennamen von icons-sprite hinzu:
Hartkodiert in ein Theme / eine Komponente
Füge die Spritesheet-Datei in den /assets-Ordner des Themes hinzu. Aktualisiere dann deine assets.json-Datei im Stammordner.
Für ein SVG-Sprite namens my-icons.svg sollte deine about.json dies enthalten:
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
Schritt 3 (optional) – Überschreiben von Standard-Icons
Jetzt, da dein Spritesheet eingerichtet ist, kannst du Discourse mitteilen, welche Icons ersetzt werden sollen. So machst du es aus einem 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");
// usw.
});
Die erste ID, bars, ist die Standard-Icon-ID in Discourse und die zweite ist die ID deines Ersatz-Icons. Der einfachste Weg, die ID eines unserer Icons zu finden, ist, das Icon in deinem Browser zu inspizieren.
Hier folgt der Icon-Name dem Präfix d-icon-. In diesem Beispiel ist es also d-unliked.
Die meisten unserer Icons folgen den Icon-Namen von https://fontawesome.com/, aber es gibt Ausnahmen (deshalb ist das Prüfen der ID in deinem Inspector die zuverlässigste Methode). Du kannst alle Ausnahmen im const REPLACEMENTS-Block hier auf GitHub sehen.
Das war’s. Du kannst Discourse jetzt mit deinen eigenen benutzerdefinierten Icons gestalten!
Dieses Dokument wird versioniert – Vorschläge für Änderungen auf GitHub.