Icônes

Jamdesk intègre 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, Accordions, 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 Icon

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 l'intégralité de la bibliothèque d'icônes sur fontawesome.com/icons. Recherchez ce dont vous avez besoin, puis utilisez le nom de l'icône dans votre documentation.

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} />

Icônes de marques courantes :

Variantes d'icônes

Les icônes Font Awesome existent en plusieurs variantes de style qui contrôlent le poids visuel. Spécifiez la variante en préfixant le nom de l'icône.

Variantes disponibles

La famille Sharp de Font Awesome, aux angles carrés, est également disponible : sharp-solid/, sharp-regular/, sharp-light/, sharp-thin/, et sharp-duotone-solid/ (par exemple sharp-duotone-solid/star).

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ù les 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"]
}

Forme objet de l'icône

Dans docs.json, partout où une icône est acceptée (groupes de navigation, tabs, anchors, icônes de page et popularPages de recherche), vous pouvez écrire l'icône sous forme d'objet plutôt que de chaîne. C'est la forme que génère le sélecteur d'icônes du dashboard :

{
  "group": "Security",
  "icon": { "name": "shield", "style": "duotone" }
}

{ "name": "shield", "style": "duotone" } équivaut à la chaîne "duotone/shield". Utilisez la forme que vous préférez. Le frontmatter icon (icônes de page) n'accepte que la forme chaîne.

Variante par défaut

Lorsqu'aucune variante n'est spécifiée, les icônes s'affichent dans la variante Solid. Remplacez-la icône par icône avec un préfixe de style (light/gear) ou, dans docs.json, le champ style de la forme objet.

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 barre latérale à trois niveaux : anchors, 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'anchor

Ajoutez des icônes aux anchors de premier niveau 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 environ 2 000 dans la version gratuite)
• Toutes les icônes gratuites fonctionnent sans aucune 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 ?