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 el 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 necesitas y luego usa el nombre del icono en tus documentos.

Iconos de marcas

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

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

Algunos iconos de marcas comunes incluyen:

Variantes de iconos

Los iconos de Font Awesome vienen en varias variantes de estilo que controlan el peso visual. Especifica la variante añadiendo un prefijo al nombre del icono.

Variantes disponibles

La familia Sharp de Font Awesome también está disponible, con esquinas cuadradas: sharp-solid/, sharp-regular/, sharp-light/, sharp-thin/ y sharp-duotone-solid/ (por ejemplo, sharp-duotone-solid/star).

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

Forma de objeto de icono

En docs.json, en cualquier lugar donde se acepte un icono (grupos de navegación, tabs, anchors, iconos de página y popularPages de búsqueda) puedes escribir el icono como un objeto en lugar de una cadena. Esta es la forma que genera el selector de iconos del dashboard:

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

{ "name": "shield", "style": "duotone" } es equivalente a la cadena "duotone/shield". Usa el que prefieras. El icon del frontmatter (iconos de página) solo admite la forma de cadena.

Variante predeterminada

Cuando no se especifica ninguna variante, los iconos se representan en la variante Solid. Sobrescríbela por icono con un prefijo de estilo (light/gear) o, en docs.json, el campo style de la forma de objeto.

Comparación de variantes

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

Iconos de navegación

Los iconos pueden aparecer en la barra lateral de navegación en tres niveles: anchors, 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 anchor

Añade iconos a los anchors 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:

• 7,000+ iconos disponibles (frente a ~2,000 en la versión gratuita)
• Todos los iconos gratuitos funcionan sin ningún cambio
• Se incluyen iconos exclusivos de pro, como las variantes duotone
• 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?