Vous pouvez remplacer les icônes SVG par défaut de Discourse individuellement ou en bloc par vos propres SVG personnalisés et les surcharger au sein d’un thème ou d’un composant de thème.
Étape 1 - Créer une feuille de sprites SVG
Pour commencer, vous devez créer une feuille de sprites SVG. Elle peut contenir n’importe quoi, depuis une seule icône SVG personnalisée supplémentaire jusqu’à un ensemble complet de remplacement composé de centaines d’icônes.
La feuille de sprites doit être enregistrée en tant que fichier SVG. En principe, vous imbriquez le contenu de la balise <svg> du fichier d’icône SVG d’origine dans des balises <symbol> et leur donnez un identifiant approprié.
<?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 à l'intérieur de la balise <svg> du fichier d'icône SVG source
il s'agit généralement de tout ce qui se trouve entre les balises <svg>
(mais pas la balise SVG elle-même, qui est remplacée par <symbol> ci-dessus)
Vous pouvez transférer n'importe quels attributs (c.-à-d. ViewBox="0 0 0 0") vers la balise <symbol>
-->
</symbol>
<symbol id="my-theme-icon-2">
<!-- Code SVG ici. Ajoutez d'autres blocs <symbol> si nécessaire.
-->
</symbol>
</svg>
-
Assurez-vous d’ajouter un ID personnalisé à chaque symbole dans la feuille de sprites. Il est probablement utile pour votre santé mentale de préfixer vos IDs avec le nom de votre thème
my-theme-icon. -
Pour que la couleur de l’icône soit dynamique comme les icônes existantes, définissez le remplissage sur
currentColorplutôt que sur une couleur codée en dur (comme #333) -
Pour mettre à l’échelle ou centrer correctement votre icône, utilisez un attribut
viewBoxsur la balise<symbol>. Consultez How to Scale SVG | CSS-Tricks pour plus d’informations. -
Soyez attentif aux collisions de styles au sein de vos SVG. Par exemple, les SVG ont souvent un style en ligne défini comme
.st0{fill:#FF0000;}. Si vous avez plusieurs SVG utilisant les mêmes classes, cela peut causer des problèmes (pour corriger ces problèmes, modifiez les classes pour qu’elles soient uniques pour chaque icône). -
Si vous avez beaucoup d’icônes, il existe des moyens d’automatiser cela. https://www.npmjs.com/package/svg-sprite-generator est un simple outil en ligne de commande pour combiner des SVG en une feuille de sprites.
Exemple - feuille de sprites avec une seule icône personnalisée
<?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>
Étape 2 - Ajouter la feuille de sprites à votre thème
Une fois votre feuille de sprites créée, vous devez ajouter le fichier SVG à votre composant/thème. C’est facile via l’interface utilisateur, ou vous pouvez le coder en dur dans un composant/thème.
Une fois qu’il est téléversé dans n’importe quel composant/thème installé, il est disponible dans toute votre instance en utilisant l’ID de la balise
<symbol>.
Via l’interface utilisateur
Allez dans la section Téléversements des paramètres du thème/composant et ajoutez votre fichier sprite avec un nom de variable SCSS icons-sprite :
Codage en dur dans un thème / composant
Ajoutez le fichier de feuille de sprites dans le dossier /assets du thème. Puis mettez à jour votre fichier assets.json dans le dossier racine.
Pour un sprite SVG nommé my-icons.svg, votre about.json doit inclure ceci :
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
Étape 3 (optionnelle) - Surcharger les icônes par défaut
Maintenant que votre feuille de sprites est prête, vous pouvez indiquer à Discourse de remplacer les icônes. Voici comment faire depuis 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");
// etc.
});
Le premier ID, bars, est l’ID de l’icône par défaut dans Discourse et le second est l’ID de votre icône de remplacement. La façon la plus simple de trouver l’ID de l’une de nos icônes est d’inspecter l’icône dans votre navigateur.
Ici, le nom de l’icône suit le préfixe d-icon-. Donc dans cet exemple, c’est d-unliked
La plupart de nos icônes suivent les noms d’icônes de https://fontawesome.com/, mais il y a des exceptions (c’est pourquoi vérifier l’ID dans votre inspecteur est la méthode la plus fiable). Vous pouvez voir toutes les exceptions dans le bloc const REPLACEMENTS ici sur github.
C’est tout. Vous pouvez maintenant personnaliser Discourse avec vos propres icônes personnalisées !
Ce document est sous contrôle de version - suggérez des modifications sur github.