Icônes

Jamdesk est livré avec Font Awesome Pro -- des milliers d'icônes, gratuites et pro, prêtes à l'emploi.

Utiliser les icônes dans les composants

La plupart des composants acceptent une prop icon avec un nom d'icône Font Awesome :

<Card title="Quickstart" icon="rocket" href="/quickstart">

  Learn how to set up your documentation site.

</Card>

Les icônes fonctionnent dans les Cards, les Accordions, les Tabs et les éléments de navigation.

Le composant Icon

Utilisez le composant <Icon> pour afficher des icônes en ligne avec du texte :

<Icon icon="check" color="green" /> Task completed

Tâche terminée

Props de l'icône

Exemples

<Icon icon="star" color="yellow" size={24} />
<Icon icon="circle-check" color="green" />
<Icon icon="triangle-exclamation" color="orange" />
<Icon icon="heart" color="#E91E63" size={20} />

Trouver des icônes

Parcourez la bibliothèque complète d'icônes sur fontawesome.com/icons. Recherchez ce dont vous avez besoin, puis utilisez le nom de l'icône dans vos docs.

Icônes de marques

Les logos de technologies et d'entreprises sont automatiquement détectés et affichés correctement :

<Icon icon="github" size={24} />
<Icon icon="discord" size={24} />
<Icon icon="react" size={24} />
<Icon icon="python" size={24} />

Les icônes de marques courantes incluent :

Variantes d'icônes

Les icônes Font Awesome sont disponibles en plusieurs variantes de style, vous permettant de contrôler le poids visuel et l'apparence. Spécifiez la variante en préfixant le nom de l'icône.

Variantes disponibles

Exemples

<Icon icon="solid/bell" size={24} />
<Icon icon="regular/bell" size={24} />
<Icon icon="light/bell" size={24} />
<Icon icon="thin/bell" size={24} />
<Icon icon="duotone/bell" size={24} />

Utiliser les variantes dans les composants

Les variantes fonctionnent partout où des icônes sont utilisées : composants, navigation et frontmatter.

<Card title="Callouts" icon="light/bell" href="/components/callouts">

  Add important notices to your documentation.

</Card>

---
title: Settings
icon: light/gear
---

{
  "group": "Account",
  "icon": "regular/user",
  "pages": ["profile", "settings"]
}

Variante par défaut

Lorsqu'aucune variante n'est spécifiée, Jamdesk utilise une valeur par défaut adaptée au thème :

• Thème Jam : utilise la variante light pour un rendu épuré et minimaliste
• Autres thèmes : utilise la variante solid pour une visibilité maximale

Vous pouvez toujours remplacer la valeur par défaut en spécifiant une variante explicitement.

Comparaison des variantes

Voici la même icône dans toutes les variantes pour vous aider à choisir :

Icônes de navigation

Les icônes peuvent apparaître dans la navigation en barre latérale à trois niveaux : ancres, groupes et pages individuelles.

Icônes de page

Ajoutez une icône à n'importe quelle page via le frontmatter :

---
title: Authentication
icon: lock
---

L'icône apparaît dans la barre latérale à côté du titre de la page.

Icônes de groupe

Ajoutez des icônes aux groupes de navigation dans docs.json :

{
  "group": "Security",
  "icon": "shield",
  "pages": ["authentication", "api-keys"]
}

Icônes d'ancre

Ajoutez des icônes aux ancres de niveau supérieur dans docs.json :

{
  "navigation": {
    "anchors": [
      {
        "anchor": "Docs",
        "icon": "book-open",
        "groups": [...]
      },
      {
        "anchor": "API",
        "icon": "code",
        "groups": [...]
      }
    ]
  }
}

Icônes gratuites vs Pro

Jamdesk inclut Font Awesome Pro, ce qui signifie :

• Plus de 7 000 icônes disponibles (contre ~2 000 dans la version gratuite)
• Toutes les icônes gratuites fonctionnent sans modification
• Les icônes exclusives Pro comme les variantes duotone sont incluses
• Les icônes de poids light et thin sont disponibles

Si vous migrez depuis une autre plateforme de documentation qui utilisait Font Awesome Free, toutes vos icônes existantes continueront de fonctionner.

Et ensuite ?