Ícones

O Jamdesk inclui o Font Awesome Pro: milhares de ícones gratuitos e profissionais, prontos para uso.

Usar ícones em componentes

A maioria dos componentes aceita uma propriedade icon com o nome de um ícone do Font Awesome:

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

  Learn how to set up your documentation site.

</Card>

Os ícones funcionam em Cards, Accordions, Tabs e itens de navegação.

O componente de ícone

Use o componente <Icon> para exibir ícones em linha com o texto:

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

Tarefa concluída

Propriedades de ícones

Exemplos

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

Encontrar ícones

Explore a biblioteca completa de ícones em fontawesome.com/icons. Pesquise o que você precisa e use o nome do ícone na sua documentação.

Ícones de marcas

Logotipos de tecnologias e empresas são detectados e renderizados automaticamente de forma correta:

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

Os ícones de marcas mais comuns incluem:

Variantes de ícones

Os ícones do Font Awesome têm várias variantes de estilo que controlam o peso visual. Especifique a variante adicionando um prefixo ao nome do ícone.

Variantes disponíveis

A família Sharp do Font Awesome também está disponível, com cantos quadrados: sharp-solid/, sharp-regular/, sharp-light/, sharp-thin/ e sharp-duotone-solid/ (por exemplo, sharp-duotone-solid/star).

Exemplos

<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 em componentes

As variantes funcionam em qualquer lugar onde os ícones são usados: componentes, navegação 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"]
}

Formato de objeto de ícone

Em docs.json, sempre que um ícone for aceito — grupos de navegação, tabs, âncoras, ícones de páginas e popularPages de pesquisa — você pode escrevê-lo como um objeto em vez de uma string. Esse é o formato gerado pelo seletor de ícones do dashboard:

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

{ "name": "shield", "style": "duotone" } equivale à string "duotone/shield". Use o formato que preferir. O icon do frontmatter (ícones de páginas) aceita somente o formato de string.

Variante padrão

Quando nenhuma variante é especificada, os ícones são renderizados na variante Sólida. Substitua-a por ícone usando um prefixo de estilo (light/gear) ou, em docs.json, o campo style do formato de objeto.

Comparar variantes

Veja o mesmo ícone em todas as variantes para ajudar na escolha:

Ícones de navegação

Os ícones podem aparecer na navegação da barra lateral em três níveis: âncoras, grupos e páginas individuais.

Ícones de páginas

Adicione um ícone a qualquer página usando o frontmatter:

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

O ícone aparece na barra lateral ao lado do título da página.

Ícones de grupos

Adicione ícones aos grupos de navegação em docs.json:

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

Ícones de âncoras

Adicione ícones às âncoras de nível superior em docs.json:

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

Ícones gratuitos e profissionais

O Jamdesk inclui o Font Awesome Pro, o que significa:

• Mais de 7.000 ícones disponíveis (em comparação com cerca de 2.000 na versão gratuita)
• Todos os ícones gratuitos funcionam sem alterações
• Ícones exclusivos do Pro, como as variantes duotônicas, estão incluídos
• Ícones com peso leve e fino estão disponíveis

Se você estiver migrando de outra plataforma de documentação que usava o Font Awesome Free, todos os seus ícones existentes continuarão funcionando.

O que vem a seguir?