Icone

Jamdesk include Font Awesome Pro: migliaia di icone gratuite e pro.

Utilizzo delle icone nei componenti

La maggior parte dei componenti accetta una prop icon con il nome di un'icona Font Awesome:

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

  Learn how to set up your documentation site.

</Card>

Le icone funzionano in Card, Accordion, Tab e nelle voci di navigazione.

Il componente Icon

Usa il componente <Icon> per mostrare icone inline con il testo:

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

Attività completata

Props di Icon

Esempi

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

Trovare le icone

Sfoglia la libreria completa di icone su fontawesome.com/icons. Cerca ciò che ti serve, poi usa il nome dell'icona nella tua documentazione.

Icone dei brand

Jamdesk rileva automaticamente i loghi di tecnologie e aziende:

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

Le icone di marchi più comuni includono:

Varianti delle icone

Le icone Font Awesome esistono in più varianti di stile che controllano il peso visivo. Aggiungi un prefisso al nome dell'icona per scegliere una variante.

Varianti disponibili

È disponibile anche la famiglia Sharp di Font Awesome, con angoli squadrati: sharp-solid/, sharp-regular/, sharp-light/, sharp-thin/ e sharp-duotone-solid/ (ad esempio sharp-duotone-solid/star).

Esempi

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

Utilizzo delle varianti nei componenti

Le varianti funzionano ovunque si usano le icone: componenti, navigazione e 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"]
}

Forma a oggetto delle icone

Ovunque docs.json accetta un'icona (gruppi di navigazione, tab, anchor, icone di pagina e popularPages della ricerca), puoi scriverla come oggetto invece che come stringa. Il selettore di icone della dashboard produce questa forma:

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

{ "name": "shield", "style": "duotone" } è equivalente alla stringa "duotone/shield". Usa quella che preferisci. Il campo icon nel frontmatter (icone di pagina) accetta solo la forma a stringa.

Variante predefinita

Le icone vengono renderizzate nella variante Solid per impostazione predefinita. Puoi sostituirla per singola icona con un prefisso di stile (light/gear) o, in docs.json, con il campo style della forma a oggetto.

Confronto tra le varianti

La stessa icona in ogni variante:

Icone di navigazione

Le icone possono apparire nella navigazione della barra laterale a tre livelli: anchor, gruppi e singole pagine.

Icone delle pagine

Aggiungi un'icona a qualsiasi pagina usando il frontmatter:

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

L'icona appare nella barra laterale accanto al titolo della pagina.

Icone dei gruppi

Aggiungi icone ai gruppi di navigazione in docs.json:

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

Icone degli ancoraggi

Aggiungi icone agli anchor di primo livello in docs.json:

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

Icone gratuite e Pro

Jamdesk include Font Awesome Pro, il che significa:

• 7.000+ icone disponibili (contro circa 2.000 nella versione free)
• Tutte le icone free funzionano senza modifiche
• Sono incluse anche le icone esclusive Pro, come le varianti duotone
• Disponibili anche icone con peso light e thin

Le icone di una piattaforma di documentazione che usava Font Awesome Free continuano a funzionare dopo la migrazione.

Qual è il prossimo passo?