Ir para o conteúdo
Secções
Idioma, atualmente Português
Sistema de design Rastrillo

Ícones

12 slugs, incorporados como SVG inline e compilados no binário: sem passo de build, sem segunda origem, e funcionam sem rede nenhuma. Cada um recebe o tamanho do texto ao lado pela própria regra .icon do tokens.css, que é o tamanho que está a ver aqui. Um slug que nada responde não desenha nada, por isso uma gralha custa um ícone em falta e não uma página que morreu a meio da resposta.

  • alert-triangle{{icon "alert-triangle"}}lucide.dev/icons/triangle-alert
  • check{{icon "check"}}lucide.dev/icons/check
  • check-circle{{icon "check-circle"}}lucide.dev/icons/circle-check
  • chevron-down{{icon "chevron-down"}}lucide.dev/icons/chevron-down
  • help-circle{{icon "help-circle"}}lucide.dev/icons/circle-help
  • info{{icon "info"}}lucide.dev/icons/info
  • kebab{{icon "kebab"}}lucide.dev/icons/ellipsis-vertical
  • menu{{icon "menu"}}lucide.dev/icons/menu
  • plus{{icon "plus"}}lucide.dev/icons/plus
  • x{{icon "x"}}lucide.dev/icons/x
  • x-circle{{icon "x-circle"}}lucide.dev/icons/circle-x

Os nomes são do próprio rastrillo

5 dos 12 diferem do nome que o lucide.dev publica, por isso até o conjunto Lucide traz uma tradução própria. Sempre que a última linha sob um ícone não repete o seu nome, é um desses. O ganho é que uma mesma chamada significa o mesmo glifo qualquer que seja o conjunto que a app gere, e os partials entregues nunca mudam quando o conjunto muda.

kebab e menu são o par que vale a pena não confundir: kebab são os três pontos que significam mais ações nesta linha, e menu as três linhas que significam navegação. Os shells usam menu quando se recolhem.

De onde vêm os glifos

Lucide, incorporado sob a licença ISC e fixado no código em vez de ser descarregado em tempo de execução. O rastrillo new --icons=font-awesome gera antes o Font Awesome Free: uma fonte de onde uma app pode beber, não uma dependência que esta framework tenha. Aqui nada o descarrega, e o Pro é um produto pago que o rastrillo não pode incorporar em seu nome.

O conjunto completo está em lucide.dev (abre num separador novo).

Um ícone que a framework não traz

O pacote icons que o rastrillo new escreve é código da própria app: acrescente lá o glifo e chame-o como a qualquer outro. Passe o seu Icon e o seu Assets ao ui.Pages como icon e iconAssets, e o seu conjunto fica à frente do da framework.

Funcs: template.FuncMap{"icon": icons.Icon, "iconAssets": icons.Assets, "asset": assets.Path},

Passe sempre as duas. Só com icon, o iconAssets fica no valor predefinido da framework, e a entrega cdn ou js falha sem qualquer erro.