Hakumi :: Rails ViewComponents

Basic Icons

Semantic vector graphics.

Code

<%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
  <%= render Hakumi::Icon::Component.new(name: :home) %>
  <%= render Hakumi::Icon::Component.new(name: :setting, theme: :filled) %>
  <%= render Hakumi::Icon::Component.new(name: :smile, theme: :outlined) %>
  <%= render Hakumi::Icon::Component.new(name: :check_circle, theme: :two_tone, color: "#52c41a") %>
<% end %>

Sizes

Icons can be set to different sizes.

Code

<%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
  <%= render Hakumi::Icon::Component.new(name: :home, size: 16) %>
  <%= render Hakumi::Icon::Component.new(name: :home, size: 24) %>
  <%= render Hakumi::Icon::Component.new(name: :home, size: 32) %>
  <%= render Hakumi::Icon::Component.new(name: :home, size: 48) %>
<% end %>

Rotate & Spin

Icons can be rotated or set to spin.

Code

<%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
  <%= render Hakumi::Icon::Component.new(name: :loading, spin: true) %>
  <%= render Hakumi::Icon::Component.new(name: :sync, spin: true) %>
  <%= render Hakumi::Icon::Component.new(name: :smile, rotate: 180) %>
<% end %>

Colors

Icons can be set to any color.

Code

<%= render Hakumi::Space::Component.new(size: :middle, align: :center, class: "text-2xl") do %>
  <%= render Hakumi::Icon::Component.new(name: :heart, theme: :filled, color: "#eb2f96") %>
  <%= render Hakumi::Icon::Component.new(name: :check_circle, theme: :filled, color: "#52c41a") %>
  <%= render Hakumi::Icon::Component.new(name: :close_circle, theme: :filled, color: "#ff4d4f") %>
  <%= render Hakumi::Icon::Component.new(name: :info_circle, theme: :filled, color: "#1890ff") %>
  <%= render Hakumi::Icon::Component.new(name: :warning, theme: :filled, color: "#faad14") %>
<% end %>

Custom SVG

Render custom SVG icons.

Code

<%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
  <%= render(Hakumi::Icon::Component.new(svg: '<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z"/></svg>')) %>
<% end %>

Icon API

Prop	Type	Default	Description
`name`	`String or Symbol`	`-`	Ant Design icon name (required if svg absent).
`theme`	`:outlined \| :filled or :two_tone`	`:outlined`	Icon theme.
`size`	`Integer`	`16`	Font-size in pixels.
`svg`	`String`	`-`	Custom inline SVG (overrides name/theme).
`color`	`String`	`-`	CSS color value.
`spin`	`Boolean`	`false`	Apply spinning animation.
`rotate`	`0 \| 90 \| 180 or 270`	`-`	Rotate icon degrees.
`fallback_to_outlined`	`Boolean`	`false`	When true, use outlined theme as a fallback if the requested theme SVG is missing.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into wrapper span. Pass as kwargs (e.g., `class:`, `style:`, `data:`).