Icon
SVG icons from Heroicons, rendered inline for styling flexibility.
Basic Icons
Use the name prop to select an icon.
<%= render Rvk::IconComponent.new(name: :home, variant: :solid) %>
<%= render Rvk::IconComponent.new(name: :user, variant: :solid) %>
<%= render Rvk::IconComponent.new(name: :cog, variant: :solid) %>Variants
Icons come in outline and solid variants.
outline
solid
<%= render Rvk::IconComponent.new(name: :home, variant: :outline) %>
<%= render Rvk::IconComponent.new(name: :home, variant: :solid) %>Sizes
Icons come in 5 sizes.
xs
sm
md
lg
xl
<%= render Rvk::IconComponent.new(name: :star, size: :xs, variant: :solid) %>
<%= render Rvk::IconComponent.new(name: :star, size: :sm, variant: :solid) %>
<%= render Rvk::IconComponent.new(name: :star, size: :md, variant: :solid) %>
<%= render Rvk::IconComponent.new(name: :star, size: :lg, variant: :solid) %>
<%= render Rvk::IconComponent.new(name: :star, size: :xl, variant: :solid) %>Colors
Icons inherit text color. Use Tailwind classes to style.
<%= render Rvk::IconComponent.new(name: :heart, size: :lg, variant: :solid, class: "text-red-500") %>
<%= render Rvk::IconComponent.new(name: :check_circle, size: :lg, variant: :solid, class: "text-green-500") %>
<%= render Rvk::IconComponent.new(name: :exclamation_triangle, size: :lg, variant: :solid, class: "text-yellow-500") %>Common Icons
Some frequently used icons.
home
user
users
cog
bell
envelope
calendar
folder
document
plus
minus
x_mark
check
pencil
trash
archive_box
arrow_left
arrow_right
arrow_up
arrow_down
chevron_left
chevron_right
chevron_up
chevron_down
magnifying_glass
funnel
bars_3
ellipsis_vertical
eye
eye_slash
lock_closed
lock_open
heart
star
bookmark
flag
phone
camera
photo
video_camera
link
clipboard
document_duplicate
cloud
arrow_up_tray
arrow_down_tray
chart_bar
chart_pie
presentation_chart_line
<%= render Rvk::IconComponent.new(name: :home, variant: :solid) %>
<%= render Rvk::IconComponent.new(name: :user, variant: :solid) %>
<%= render Rvk::IconComponent.new(name: :heart, variant: :solid) %>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | Symbol/String | required | Heroicon name (e.g., :home, :user) |
| variant | Symbol | :outline | Icon style: :outline or :solid |
| size | Symbol | :md | Icon size: :xs, :sm, :md, :lg, :xl |