Icon

Um wrapper do lucide-rails com os tamanhos do shadcn e semântica acessível.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add icon --yes

O item icon do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/icon_component.rb
app/helpers/ui/icon_helper.rb
vendor/shadwire/shadwire.css

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

Os nomes são os do Lucide, em kebab-case, como "chevron-down".

<%= ui_icon("download") %>
<%= ui_icon("bell", label: "Notifications") %>

Ou renderize Ui::IconComponent diretamente:

<%= render Ui::IconComponent.new("download", size: :lg) %>

Exemplos

Decorativo e rotulado

Ícones são decorativos por padrão; passe label: quando o ícone tiver significado.

<div class="flex items-center gap-4">
  <%= ui_icon("download") %>
  <%= ui_icon("bell", label: "Notificações") %>
  <%= ui_button(variant: :outline, size: :sm) do %>
    <%= ui_icon("mail") %>
    Mensagem
  <% end %>
  <%= ui_button(size: :icon, variant: :secondary) do %>

<div class="flex items-center gap-4">
  <%= ui_icon("download") %>
  <%= ui_icon("bell", label: "Notificações") %>
  <%= ui_button(variant: :outline, size: :sm) do %>
    <%= ui_icon("mail") %>
    Mensagem
  <% end %>
  <%= ui_button(size: :icon, variant: :secondary) do %>
    <%= ui_icon("plus", label: "Adicionar item") %>
  <% end %>
</div>

Referência da API

ui_icon(name, **options) encapsula Ui::IconComponent.new(name, **options).

Argumento	Tipo	Padrão	Descrição
`name`	String	Obrigatório	Nome do ícone Lucide em kebab-case.
`size`	Symbol/String	`:default`	`:sm`, `:default`, `:lg` ou `:xl`.
`label`	String	`nil`	Quando presente, expõe o SVG com `role="img"` e `aria-label`.
`**attrs`	Hash	`{}`	Atributos HTML livres para o SVG.