Blocks

Icon

Inline SVG icon helper. Reads from app/components/shadcnrb/icon/icons/; delegates to lucide-rails (if the gem is loaded) for full Lucide coverage.

Installation

bin/rails g shadcnrb:component icon

Example

<div class="flex items-center gap-4">
  <%= sui.icon :check %>
  <%= sui.icon :search %>
  <%= sui.icon :settings %>
  <%= sui.icon :"circle-alert" %>
  <%= sui.icon :x %>
</div>

Sizes

Pass size: :sm / :md / :lg, or any Tailwind class via class:.

<div class="flex items-center gap-4">
  <%= sui.icon :check, size: :sm %>
  <%= sui.icon :check, size: :md %>
  <%= sui.icon :check, size: :lg %>
  <%= sui.icon :check, class: "size-8" %>
</div>

Coverage

The installer copies a minimal bundled set into app/components/shadcnrb/icon/icons/. Drop more SVGs there to extend coverage — filename becomes the symbol (check.svgsui.icon(:check)).

For full Lucide coverage (~2000 icons) without bundling by hand, add the lucide-rails gem — sui.icon delegates to it automatically when present.

API

ArgTypeDescription
nameSymbol / StringIcon name. Hyphens allowed via quoted symbol: :"circle-alert".
sizeSymbol:sm (size-3), :md / default (size-4), :lg (size-5).
class:StringMerged with the size class — use for colors, strokes, or custom sizes.