Ícones

Os ícones vêm do lucide-rails, o port para Rails do Lucide, que é o conjunto de ícones do shadcn/ui. O ui_icon embrulha o lucide_icon e acrescenta os tamanhos do shadcn.

A aplicação precisa da gem lucide-rails. O shadwire init a adiciona, e o bin/shadwire status --json a lista em gems.

Os nomes são os do Lucide, em kebab-case

<%# Wrong: React component names do not exist here %>
<%= ui_icon("ChevronDown") %>
<%= ui_icon(:chevron_down) %>

<%# Right %>
<%= ui_icon("chevron-down") %>

Dá para ver todos os nomes em lucide.dev/icons.

Tamanhos

Tamanho	Classe	Uso típico
`:sm`	`size-3`	Dentro de badges, textos auxiliares e trilhas.
`:default`	`size-4`	Botões, itens de menu, campos.
`:lg`	`size-5`	Títulos, blocos com ícone, estados vazios.
`:xl`	`size-6`	Ilustrações e destaques.

<%= ui_icon("check", size: :sm) %>

Use esses tamanhos em vez de class: "w-3 h-3", para os seus ícones acompanharem o resto se a escala mudar um dia.

Ícones são decorativos por padrão

O ui_icon renderiza aria-hidden="true". É o que você quer ao lado de um texto, porque o texto já dá nome ao controle.

<%# Right: "Download" is already the label; the icon is decoration %>
<%= ui_button { safe_join([ ui_icon("download"), " Download" ]) } %>

Quando o ícone é o único conteúdo, é ele que precisa dar o nome. Passe label:, que define role="img" e aria-label e remove o aria-hidden:

<%# Wrong: icon-only button with no accessible name %>
<%= ui_button(size: :icon) { ui_icon("trash-2") } %>

<%# Right: either of these works %>
<%= ui_button(size: :icon) { ui_icon("trash-2", label: "Delete") } %>
<%= ui_button(size: :icon, "aria-label": "Delete") { ui_icon("trash-2") } %>

Colocar o rótulo no botão em vez do ícone funciona do mesmo jeito. O que não pode é deixar os dois sem rótulo.

Não existe argumento icon:

Nenhum componente recebe o ícone como argumento. Como no shadcn/ui, o ícone vai no conteúdo.

<%# Wrong: no component has that prop %>
<%= ui_button(icon: "plus") { "Adicionar" } %>

<%# Right %>
<%= ui_button { safe_join([ ui_icon("plus"), " Adicionar" ]) } %>

O ButtonComponent tem utilitários [&_svg] que dimensionam e espaçam o ícone aninhado, então ele não precisa de classe extra. Use size: :icon para um botão só com ícone.

Junte o ícone e o texto com safe_join em vez de montar uma string. ui_icon("save") + " Save" também funciona, porque o ícone já é HTML-safe, mas o safe_join deixa a intenção clara e escapa direito o texto interpolado.