Icon

Says more than a thousand words

Includes a Ruby component and corresponding Rails helper

Ruby

Example

<%= nk_icon "car" %>

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:add icon

Files generated

Dependencies

This component adds third-party dependencies:

Rubylucide-railsWeb GitHub

Sizes

:sm

:md

<div class="flex gap-4 items-center text-xs text-center">
  <div class="flex flex-col gap-4">
    <%= nk_icon "fuel", size: :sm %>
    <code>:sm</code>
  </div>
  <div class="flex flex-col gap-4">
    <%= nk_icon "fuel", size: :md %>
    <code>:md</code>
  </div>
  <div class="flex flex-col gap-4">
    <%= nk_icon "fuel", size: :lg %>
    <code>:md</code>
  </div>
</div>

SVG attributes

Icons are output as inline <svg> elements. This makes it easy to change its properties, like stroke-width.

<%= nk_icon "car",
  class: "size-64",
  stroke_width: 0.2,
  fill: "rgba(0, 255, 255, 0.2)" %>

Usage

`nk_icon(**attrs) { \|dropdown\| ... }`
Property	Default	Description
`size`	`:md`	One of `:sm` / `:md` / `:lg`
`**attrs`		HTML attributes for `<svg>` element