Configuration
Utilisez plus de 275 000 icônes Iconify pour vos sections, pages, groupes et blocs de code.
Ajouter des icônes
Tiramisu Docs utilise Iconify pour les icônes, vous donnant accès à plus de 275 000 icônes provenant de plus de 150 jeux d'icônes. Les icônes sont chargées à la demande — aucune mise en paquet à la compilation n'est nécessaire.
Format des icônes
Les icônes utilisent le format prefix:name d'Iconify :
| Format | Exemple |
|---|---|
lucide:icon-name | Icônes Lucide (ex. lucide:rocket) |
mdi:icon-name | Material Design Icons |
simple-icons:icon-name | Icônes de marques / simples |
devicon-plain:icon-name | Icônes d'outils de développement |
heroicons:icon-name | Heroicons |
: sont automatiquement préfixés par lucide:. Ainsi icon = rocket fonctionne comme lucide:rocket.Icônes de section
Ajoutez un champ icon à la configuration de votre section dans tiramisu.config.ts :
sections: [
{ label: "Guide", path: "guide", icon: "lucide:book-open" },
{ label: "API", path: "api", icon: "lucide:code" },
]Les icônes de section apparaissent dans la barre supérieure à côté du libellé de la section.
Icônes de page et de groupe
Ajoutez icon au bloc meta de n'importe quel fichier .tiramisu :
meta { title = Getting Started, order = 1, icon = lucide:rocket }Pour les pages d'index de dossier (index.tiramisu), l'icône est appliquée au titre du groupe ou sous-groupe dans la barre latérale. Pour les pages ordinaires, l'icône apparaît à côté du titre de la page dans la barre latérale et dans l'en-tête de la page.
En-tête de page
Lors de la consultation d'une page de documentation, l'en-tête de la page affiche :
- Le nom du groupe ou sous-groupe parent sous forme de petit libellé au-dessus du titre
- L'icône de la page (si définie) à côté du titre
- Le titre et la description de la page provenant du meta
Parcourir les icônes
Utilisez le navigateur Iconify Icon Sets pour trouver des icônes. Quelques jeux populaires :
| Jeu | Préfixe | Style |
|---|---|---|
| Lucide | lucide | Icônes en trait fin |
| Material Design | mdi | Pleines / contours |
| Heroicons | heroicons | Contours / pleines |
| Simple Icons | simple-icons | Logos de marques |
| Devicon Plain | devicon-plain | Icônes d'outils de dev |
Icônes de blocs de code
Les blocs de code et les blocs de code à onglets détectent automatiquement les icônes de langage en utilisant le jeu devicon-plain. Vous pouvez remplacer l'icône détectée automatiquement :
codeblock { language = typescript, icon = "lucide:file-code", """const x = 1""" }