Iconos

Jamdesk incluye Font Awesome Pro -- miles de iconos, tanto gratuitos como pro, listos para usar.

Usar iconos en componentes

La mayoría de los componentes aceptan una prop icon con un nombre de icono de Font Awesome:

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

  Learn how to set up your documentation site.

</Card>

Los iconos funcionan en Cards, Accordions, Tabs y elementos de navegación.

El componente Icon

Usa el componente <Icon> para mostrar iconos en línea con texto:

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

Tarea completada

Props de Icon

Ejemplos

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

Buscar iconos

Explora la biblioteca completa de iconos en fontawesome.com/icons. Busca lo que necesites y luego usa el nombre del icono en tus docs.

Iconos de marcas

Los logotipos de tecnologías y empresas se detectan automáticamente y se renderizan correctamente:

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

Los iconos de marcas más comunes incluyen:

Variantes de iconos

Los iconos de Font Awesome vienen en múltiples variantes de estilo, lo que te da control sobre el peso visual y la apariencia. Especifica la variante añadiendo un prefijo al nombre del icono.

Variantes disponibles

Ejemplos

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

Usar variantes en componentes

Las variantes funcionan en cualquier lugar donde se usen iconos: componentes, navegación y 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 predeterminada

Cuando no se especifica ninguna variante, Jamdesk usa un valor predeterminado apropiado según el tema:

• Tema Jam: Usa la variante light para un aspecto limpio y minimalista
• Otros temas: Usa la variante solid para máxima visibilidad

Siempre puedes anular el valor predeterminado especificando una variante de forma explícita.

Comparar variantes

Aquí está el mismo icono en todas las variantes para ayudarte a elegir:

Iconos de navegación

Los iconos pueden aparecer en la navegación de la barra lateral en tres niveles: anclajes, grupos y páginas individuales.

Iconos de página

Añade un icono a cualquier página mediante frontmatter:

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

El icono aparece en la barra lateral junto al título de la página.

Iconos de grupo

Añade iconos a los grupos de navegación en docs.json:

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

Iconos de anclaje

Añade iconos a los anclajes de nivel superior en docs.json:

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

Iconos gratuitos vs. pro

Jamdesk incluye Font Awesome Pro, lo que significa:

• Más de 7,000 iconos disponibles (frente a ~2,000 en la versión gratuita)
• Todos los iconos gratuitos funcionan sin ningún cambio
• Iconos exclusivos pro, como las variantes duotone, están incluidos
• Iconos de peso light y thin disponibles

Si estás migrando desde otra plataforma de documentación que usaba Font Awesome Free, todos tus iconos existentes seguirán funcionando.

¿Qué sigue?