### Install Lucide Rails Gem

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Add the gem to your Gemfile or install it using the bundle command.

```ruby
gem 'lucide-rails'
```

```ruby
# $ bundle add lucide-rails
# $ gem install lucide-rails
```

--------------------------------

### Install lucide-rails Gem (without Bundler)

Source: https://github.com/heyvito/lucide-rails/blob/master/README.md

Alternatively, install the gem directly using the gem command if Bundler is not in use.

```bash
$ gem install lucide-rails
```

--------------------------------

### Install lucide-rails Gem

Source: https://github.com/heyvito/lucide-rails/blob/master/README.md

Add the lucide-rails gem to your application's Gemfile using Bundler.

```bash
$ bundle add lucide-rails
```

--------------------------------

### Render Common UI Icons

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Use the `lucide_icon` helper to render common UI icons. Ensure the gem is installed and configured.

```erb
<%# Common UI icons %>
<%= lucide_icon('home') %>
<%= lucide_icon('user') %>
<%= lucide_icon('settings') %>
<%= lucide_icon('search') %>
<%= lucide_icon('menu') %>
<%= lucide_icon('x') %>
```

```erb
<%# Action icons %>
<%= lucide_icon('plus') %>
<%= lucide_icon('minus') %>
<%= lucide_icon('edit') %>
<%= lucide_icon('trash') %>
<%= lucide_icon('save') %>
<%= lucide_icon('download') %>
<%= lucide_icon('upload') %>
```

```erb
<%# Navigation icons %>
<%= lucide_icon('arrow-left') %>
<%= lucide_icon('arrow-right') %>
<%= lucide_icon('chevron-down') %>
<%= lucide_icon('chevron-up') %>
<%= lucide_icon('external-link') %>
```

```erb
<%# Status/feedback icons %>
<%= lucide_icon('check') %>
<%= lucide_icon('check-circle') %>
<%= lucide_icon('x-circle') %>
<%= lucide_icon('alert-triangle') %>
<%= lucide_icon('info') %>
<%= lucide_icon('loader') %>
```

```erb
<%# Social/brand icons %>
<%= lucide_icon('github') %>
<%= lucide_icon('twitter') %>
<%= lucide_icon('linkedin') %>
<%= lucide_icon('mail') %>
```

```erb
<%# Media icons %>
<%= lucide_icon('play') %>
<%= lucide_icon('pause') %>
<%= lucide_icon('volume-2') %>
<%= lucide_icon('image') %>
<%= lucide_icon('camera') %>
```

--------------------------------

### Empty State Illustration

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Create an empty state message with an icon to guide users when no content is available. Customize icon `size` and `class` for appearance.

```erb
<div class="text-center py-12">
  <%= lucide_icon('inbox', size: 48, class: 'mx-auto text-gray-300') %>
  <h3 class="mt-4 text-lg font-medium text-gray-900">No items found</h3>
  <p class="mt-1 text-gray-500">Get started by creating a new item.</p>
</div>
```

--------------------------------

### Get Raw SVG Content for an Icon

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Retrieve the raw SVG content for a specific icon programmatically using `LucideRails::IconProvider.icon`.

```ruby
# Get raw SVG content for an icon
svg_content = LucideRails::IconProvider.icon('check')
# => "<circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"m9 12 2 2 4-4\"></path>"
```

--------------------------------

### Configure Filesystem Icon Provider

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Set the icon provider to `:filesystem` in an initializer for lower memory usage, which loads icons from disk I/O per request.

```ruby
# config/initializers/lucide_rails.rb

# Use filesystem provider (lower memory, disk I/O per icon)
LucideRails.provider = :filesystem
```

--------------------------------

### Set Default Options for All Icons

Source: https://github.com/heyvito/lucide-rails/blob/master/README.md

Configure default attributes for all icons by updating `LucideRails.default_options` in an initializer file.

```ruby
LucideRails.default_options = LucideRails.default_options.merge(
  'class' => 'lucide-icon',
  'some-extra-attr' => 'some-other-value',
)
```

--------------------------------

### Use Icon Provider in Custom Helper

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Demonstrates how to use `LucideRails::IconProvider.icon` within a custom helper or service to dynamically retrieve icon SVG content based on different conditions.

```ruby
# Use in a custom helper or service
class NotificationService
  def self.icon_for(type)
    case type
    when :success then LucideRails::IconProvider.icon('check-circle')
    when :error   then LucideRails::IconProvider.icon('x-circle')
    when :warning then LucideRails::IconProvider.icon('alert-triangle')
    when :info    then LucideRails::IconProvider.icon('info')
    end
  end
end
```

--------------------------------

### Handle Unknown Icons with Icon Provider

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Illustrates how calling `LucideRails::IconProvider.icon` with a non-existent icon name raises an `ArgumentError`, which can be caught and handled.

```ruby
# Unknown icons raise ArgumentError
begin
  LucideRails::IconProvider.icon('nonexistent-icon')
rescue ArgumentError => e
  puts e.message  # => "Unknown icon nonexistent-icon"
end
```

--------------------------------

### Configure Memory Icon Provider

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Set the icon provider to `:memory` in an initializer to use the default behavior, which loads all icons into an in-memory cache for faster access.

```ruby
# Use memory provider (default - loads all icons into memory cache)
LucideRails.provider = :memory
```

--------------------------------

### Loading Spinner

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Implement a loading spinner using the `loader` icon with Tailwind CSS's `animate-spin` class. Adjust `size` as needed.

```erb
<div class="flex items-center">
  <%= lucide_icon('loader', size: 24, class: 'animate-spin') %>
  <span class="ml-2">Loading...</span>
</div>
```

--------------------------------

### Override Default Icon Size Globally

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Change the default width and height for all icons by merging new values into `LucideRails.default_options`.

```ruby
# Override default size for all icons
LucideRails.default_options = LucideRails.default_options.merge(
  'width' => '20',
  'height' => '20'
)
```

--------------------------------

### Navigation Menu with Icons

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Integrate icons into navigation links using the `lucide_icon` helper with `size` and `class` options for styling with Tailwind CSS.

```erb
<nav class="flex space-x-4">
  <a href="/" class="flex items-center">
    <%= lucide_icon('home', size: 20, class: 'mr-1') %>
    Home
  </a>
  <a href="/profile" class="flex items-center">
    <%= lucide_icon('user', size: 20, class: 'mr-1') %>
    Profile
  </a>
  <a href="/settings" class="flex items-center">
    <%= lucide_icon('settings', size: 20, class: 'mr-1') %>
    Settings
  </a>
</nav>
```

--------------------------------

### Set Multiple Default Icon Attributes

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Apply multiple default attributes, such as CSS classes and stroke width, to all icons by merging them into `LucideRails.default_options`.

```ruby
# Multiple default attributes
LucideRails.default_options = LucideRails.default_options.merge(
  'class' => 'icon',
  'data-controller' => 'icon',
  'stroke-width' => '1.5'
)
```

--------------------------------

### Set Custom Icon Dimensions and Fill

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Specify exact width and height, along with fill and stroke colors, for an icon using dedicated attributes.

```erb
<%# Icon with custom dimensions %>
<%= lucide_icon('star', width: 48, height: 48, fill: 'gold', stroke: 'orange') %>
```

--------------------------------

### Icon Buttons

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Create icon buttons by embedding the `lucide_icon` helper within button elements. Use `size` and `class` for styling.

```erb
<div class="flex space-x-2">
  <button class="p-2 rounded hover:bg-gray-100" title="Edit">
    <%= lucide_icon('edit', size: 18) %>
  </button>
  <button class="p-2 rounded hover:bg-gray-100" title="Delete">
    <%= lucide_icon('trash', size: 18, class: 'text-red-500') %>
  </button>
</div>
```

--------------------------------

### Basic Icon Usage in Rails View

Source: https://github.com/heyvito/lucide-rails/blob/master/README.md

Use the `lucide_icon` helper in your ERB views to render a Lucide icon by its name.

```erb
<%= lucide_icon('accessibility') %>
```

--------------------------------

### Set Default CSS Class for All Icons

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Configure a default CSS class to be applied to all icons rendered by the gem by merging it into `LucideRails.default_options` in an initializer.

```ruby
# config/initializers/lucide_rails.rb

# Add a default CSS class to all icons
LucideRails.default_options = LucideRails.default_options.merge(
  'class' => 'lucide-icon'
)
```

--------------------------------

### Customize Lucide Icon Size

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Control the size of an icon using the `size` shorthand attribute, which sets both width and height.

```erb
<%# Icon with custom size using the size shorthand %>
<%= lucide_icon('settings', size: 32) %>
<%# Sets both width and height to 32 %>
```

--------------------------------

### Customize Lucide Icon with CSS Class

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Apply custom CSS classes to an icon by passing them as an attribute to the `lucide_icon` helper.

```erb
<%# Icon with custom CSS class %>
<%= lucide_icon('user', class: 'icon-primary') %>
```

--------------------------------

### Configure Icon Accessibility Attributes

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Override default accessibility attributes like `aria-hidden` and provide an `aria-label` for screen readers when necessary.

```erb
<%# Icon with accessibility label (overrides default aria-hidden) %>
<%= lucide_icon('alert-triangle', 'aria-hidden' => 'false', 'aria-label' => 'Warning') %>
```

--------------------------------

### Rendered SVG for Accessibility Icon

Source: https://github.com/heyvito/lucide-rails/blob/master/README.md

The `lucide_icon` helper renders an SVG element for the specified icon.

```html
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="16" cy="4" r="1"></circle><path d="m18 19 1-7-5.87.94"></path><path d="m5 8 3-3 5.5 3-2.21 3.1"></path><path d="M4.24 14.48c-.19.58-.27 1.2-.23 1.84a5 5 0 0 0 5.31 4.67c.65-.04 1.25-.2 1.8-.46"></path><path d="M13.76 17.52c.19-.58.27-1.2.23-1.84a5 5 0 0 0-5.31-4.67c-.65.04-1.25.2-1.8.46"></path></svg>
```

--------------------------------

### Render Basic Lucide Icon

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Use the `lucide_icon` helper in your ERB views to render an icon by its name. The helper generates an inline SVG element with default accessibility attributes.

```erb
<%# Basic icon rendering %>
<%= lucide_icon('home') %>
<%# Output: <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">...</svg> %>
```

--------------------------------

### Form Input with Icon

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Add an icon to a form input field for visual cues, such as a search icon. Use absolute positioning and padding to align the icon.

```erb
<div class="relative">
  <span class="absolute inset-y-0 left-0 flex items-center pl-3">
    <%= lucide_icon('search', size: 18, class: 'text-gray-400') %>
  </span>
  <input type="text" class="pl-10 pr-4 py-2 border rounded" placeholder="Search...">
</div>
```

--------------------------------

### Embed Lucide Icon in a Button

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Integrate icons directly within HTML buttons, combining icon and text content for enhanced user interface elements.

```erb
<%# Icon in a button %>
<button class="btn">
  <%= lucide_icon('plus', size: 16, class: 'mr-2') %>
  Add Item
</button>
```

--------------------------------

### Alert Messages with Icons

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Display alert or flash messages with appropriate status icons. The `lucide_icon` helper is used with `size` and `class` for visual feedback.

```erb
<div class="flex items-center p-4 bg-green-100 text-green-800 rounded">
  <%= lucide_icon('check-circle', size: 20, class: 'mr-2 flex-shrink-0') %>
  <span>Your changes have been saved successfully.</span>
</div>

<div class="flex items-center p-4 bg-red-100 text-red-800 rounded">
  <%= lucide_icon('alert-triangle', size: 20, class: 'mr-2 flex-shrink-0') %>
  <span>An error occurred while processing your request.</span>
</div>
```

--------------------------------

### Apply Multiple Custom Attributes to Icon

Source: https://context7.com/heyvito/lucide-rails/llms.txt

Pass multiple custom attributes, including CSS classes and stroke properties, to the `lucide_icon` helper for fine-grained control over the icon's appearance.

```erb
<%# Icon with multiple custom attributes %>
<%= lucide_icon('heart', class: 'text-red-500', stroke: '#ff0000', 'stroke-width' => '3') %>
```

--------------------------------

### Icon Usage with Extra Attributes

Source: https://github.com/heyvito/lucide-rails/blob/master/README.md

Pass additional HTML attributes to the `lucide_icon` helper to customize a single icon's SVG element.

```erb
<%= lucide_icon('accessibility', 'extra-attr' => 'test') %>
```

--------------------------------

### Rendered SVG with Extra Attributes

Source: https://github.com/heyvito/lucide-rails/blob/master/README.md

The SVG output includes the custom attributes passed to the helper.

```html
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" extra-attr="test"><circle cx="16" cy="4" r="1"></circle><path d="m18 19 1-7-5.87.94"></path><path d="m5 8 3-3 5.5 3-2.21 3.1"></path><path d="M4.24 14.48c-.19.58-.27 1.2-.23 1.84a5 5 0 0 0 5.31 4.67c.65-.04 1.25-.2 1.8-.46"></path><path d="M13.76 17.52c.19-.58.27-1.2.23-1.84a5 5 0 0 0-5.31-4.67c-.65.04-1.25.2-1.8.46"></path></svg>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.