Sie können die Standard-SVG-Symbole von Discourse einzeln oder als Ganzes durch Ihre eigenen benutzerdefinierten SVGs ersetzen und sie innerhalb eines Themes oder Theme-Komponenten überschreiben.
Schritt 1 – Erstellen eines SVG-Spritesheets
Um zu beginnen, müssen Sie ein SVG-Spritesheet erstellen. Dieses kann alles enthalten, von einem einzelnen zusätzlichen benutzerdefinierten SVG-Symbol bis hin zu einem vollständigen Ersatzsatz von Hunderten.
Das Spritesheet sollte als SVG-Datei gespeichert werden. Im Prinzip verschachteln Sie den Inhalt des \u003csvg\u003e-Tags aus der ursprünglichen SVG-Icon-Datei in \u003csymbol\u003e-Tags und geben ihnen eine schöne 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 \u003csvg\u003e-Tags aus der Quell-SVG-Icon-Datei
dies ist typischerweise alles zwischen den \u003csvg\u003e-Tags
(aber nicht das SVG-Tag selbst, das wird oben durch \u003csymbol\u003e ersetzt)
Sie können alle Attribute (d.h. ViewBox="0 0 0 0") auf das \u003csymbol\u003e-Tag übertragen
-->
</symbol>
<symbol id="my-theme-icon-2">
<!-- SVG-Code hier. Fügen Sie bei Bedarf weitere \u003csymbol\u003e-Blöcke hinzu.
-->
</symbol>
</svg>
-
Stellen Sie sicher, dass Sie jedem Symbol im Spritesheet eine benutzerdefinierte ID hinzufügen. Es ist wahrscheinlich hilfreich für Ihre Übersichtlichkeit, Ihre IDs mit Ihrem Themanamen zu präfixen, z. B.
my-theme-icon. -
Damit die Icon-Farbe dynamisch ist wie bei den vorhandenen Icons, setzen Sie
fillaufcurrentColoranstatt auf eine fest codierte Farbe (wie #333). -
Um Ihr Icon zu skalieren oder korrekt zu zentrieren, verwenden Sie ein
viewBox-Attribut für das\u003csymbol\u003e-Tag. Weitere Informationen finden Sie unter How to Scale SVG | CSS-Tricks. -
Achten Sie auf Stilkonflikte innerhalb Ihrer SVGs. SVGs haben beispielsweise oft einen Inline-Stil wie
.st0{fill:#FF0000;}definiert. Wenn Sie mehrere SVGs verwenden, die dieselben Klassen verwenden, kann dies zu Problemen führen (um diese Probleme zu beheben, bearbeiten Sie die Klassen so, dass sie für jedes Icon eindeutig sind). -
Wenn Sie viele Icons haben, 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 – Hinzufügen des Spritesheets zu Ihrem Theme
Sobald Ihr Spritesheet erstellt ist, müssen Sie die SVG-Datei zu Ihrer Komponente/Ihrem Theme hinzufügen. Dies ist einfach über die Benutzeroberfläche möglich, oder Sie können es fest in eine Komponente/ein Theme codieren.
Sobald es zu einer installierten Komponente/einem Theme hochgeladen wurde, ist es in Ihrer gesamten Instanz über die ID im
\u003csymbol\u003e-Tag verfügbar.
Über die Benutzeroberfläche
Gehen Sie zum Abschnitt „Uploads“ der Theme-/Komponenten-Einstellungen und fügen Sie Ihre Sprite-Datei mit dem SCSS-Variablennamen icons-sprite hinzu:
Festcodiert in ein Theme / eine Komponente
Fügen Sie die Spritesheet-Datei in den /assets-Ordner des Themes ein. Aktualisieren Sie dann Ihre assets.json-Datei im Stammordner.
Für ein SVG-Sprite namens my-icons.svg sollte Ihre about.json Folgendes enthalten:
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
Schritt 3 (Optional) – Überschreiben von Standard-Icons
Nachdem Ihr Spritesheet festgelegt ist, können Sie Discourse anweisen, Icons zu ersetzen. So geht das über einen 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 Ihres Ersatz-Icons. Der einfachste Weg, eine ID eines unserer Icons zu finden, besteht darin, das Icon in Ihrem 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 (weshalb die Überprüfung der ID in Ihrem Inspektor die zuverlässigste Methode ist). Alle Ausnahmen finden Sie im Block const REPLACEMENTS hier auf github.
Das war’s. Sie können Discourse jetzt mit Ihren eigenen benutzerdefinierten Icons gestalten!
Dieses Dokument wird versioniert – schlagen Sie Änderungen auf github vor.
