### Development Setup

Source: https://github.com/bharget/heroicon/blob/main/README.md

Clone the repository, install dependencies, and run tests to set up the development environment.

```bash
git clone https://github.com/bharget/heroicon.git
cd heroicon
bundle install
bundle exec rake test
```

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

### Run Heroicon Installer

Source: https://github.com/bharget/heroicon/blob/main/README.md

Execute the Rails generator to install Heroicon and create necessary configuration files.

```bash
$ rails g heroicon:install
```

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

### Install Heroicon Gem

Source: https://github.com/bharget/heroicon/blob/main/README.md

Add the Heroicon gem to your application's Gemfile and then execute bundle to install it.

```ruby
gem "heroicon"
```

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

### Configure Heroicon Defaults

Source: https://github.com/bharget/heroicon/blob/main/README.md

Configure the default icon variant and default CSS classes in the `config/initializers/heroicon.rb` file.

```ruby
Heroicon.configure do |config|
  config.variant = :solid
  config.default_class = {solid: "h-6 w-6", outline: "h-6 w-6", mini: "h-5 w-5"}
end
```

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

### Configure Tailwind CSS Content Paths

Source: https://github.com/bharget/heroicon/blob/main/README.md

Ensure that the Heroicon initializer file is included in the `content` array of your `tailwind.config.js` to allow Tailwind to scan for classes.

```javascript
module.exports = {
  //...
  content: [
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*',
    './config/initializers/heroicon.rb', // 👈
  ],
  //...
}
```

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

### Use Heroicon View Helper

Source: https://github.com/bharget/heroicon/blob/main/README.md

Render an icon using the `heroicon` view helper, specifying the icon name.

```ruby
<%= heroicon "magnifying-glass" %>
```

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

### Use Heroicon with HTML Options

Source: https://github.com/bharget/heroicon/blob/main/README.md

Pass HTML options, such as CSS classes, to the `heroicon` view helper.

```ruby
<%= heroicon "magnifying-glass", options: { class: "text-primary-500" } %>
```

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

### Use Heroicon with Variant

Source: https://github.com/bharget/heroicon/blob/main/README.md

Specify an icon variant (e.g., :outline) when using the `heroicon` view helper.

```ruby
<%= heroicon "magnifying-glass", variant: :outline %>
```

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

### Disable Default Class in View

Source: https://github.com/bharget/heroicon/blob/main/README.md

Disable the default CSS class for a specific icon instance by passing `disable_default_class: true` in the options hash.

```ruby
<%= heroicon "magnifying-glass", options: { class: "custom-class", disable_default_class: true } %>
```

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

### Rails Default 404 Error Page Styling (CSS)

Source: https://github.com/bharget/heroicon/blob/main/test/dummy/public/404.html

This CSS code styles the default 404 error page in Rails applications. It defines styles for the overall page layout, dialog box, headings, and paragraphs to present a user-friendly error message.

```CSS
.rails-default-error-page { background-color: #EFEFEF; color: #2E2F30; text-align: center; font-family: arial, sans-serif; margin: 0; }
.rails-default-error-page div.dialog { width: 95%; max-width: 33em; margin: 4em auto 0; }
.rails-default-error-page div.dialog > div { border: 1px solid #CCC; border-right-color: #999; border-left-color: #999; border-bottom-color: #BBB; border-top: #B00100 solid 4px; border-top-left-radius: 9px; border-top-right-radius: 9px; background-color: white; padding: 7px 12% 0; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); }
.rails-default-error-page h1 { font-size: 100%; color: #730E15; line-height: 1.5em; }
.rails-default-error-page div.dialog > p { margin: 0 0 1em; padding: 1em; background-color: #F7F7F7; border: 1px solid #CCC; border-right-color: #999; border-left-color: #999; border-bottom-color: #999; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-color: #DADADA; color: #666; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); }
```

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