# VelvetKit

## Icon (`UI::Icon`)

A Lucide icon.

Add it: `bin/rails generate velvetkit:add icon`

### Arguments

```ruby
UI::Icon.new(name:, size: :default, label: nil, class: nil, **html_attrs)
```

### Example: All Sizes

```erb
<div class="flex items-end gap-4">
  <%= render(UI::Icon.new(name: "menu", size: :xs)) %>
  <%= render(UI::Icon.new(name: "menu", size: :sm)) %>
  <%= render(UI::Icon.new(name: "menu", size: :default)) %>
  <%= render(UI::Icon.new(name: "menu", size: :lg)) %>
  <%= render(UI::Icon.new(name: "menu", size: :xl)) %>
</div>
```

### Example: Common Icons

```erb
<div class="grid grid-cols-6 gap-4">
  <% %w[menu arrow-right globe badge-check circle-alert x circle-check eye eye-off lock chevrons-up-down layout-dashboard panel-left user loader].each do |name| %>
    <div class="flex flex-col items-center gap-1 p-2 border rounded-md">
      <%= render(UI::Icon.new(name: name)) %>
      <span class="text-xs text-muted-foreground"><%= name %></span>
    </div>
  <% end %>
</div>
```