Famfamfam Mini Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require legacy-icons/famfamfam-mini
   

   The package provides a CSS spritesheet and a Blade directive for easy icon usage.

2. Include the CSS Add the following to your resources/css/app.css (or equivalent):

   @import 'legacy-icons/famfamfam-mini/dist/famfamfam-mini.css';
   

3. First Use Case Use the Blade directive in your view:

   <i class="{{ famfamfam('icon-name') }}"></i>
   

   Example:

   <i class="{{ famfamfam('accept') }}"></i> <!-- Renders the 'accept' icon -->
   

4. Documentation Check the FamFamFam Mini icon set reference for available icons.

Implementation Patterns

Blade Integration

• Reusable Components Create a Blade component for consistent icon usage:

  @component('icons.icon', ['name' => 'folder'])
      {{ $slot }}
  @endcomponent
  

  Usage:

  @icons.icon('folder')
      Folder Icon
  @endicons
  

• Dynamic Icons via Variables

  @php
      $icon = request()->has('edit') ? 'pencil' : 'page_white';
  @endphp
  <i class="{{ famfamfam($icon) }}"></i>
  

CSS Customization

• Override Colors/Sizes Extend the imported CSS in your stylesheet:

  .famfamfam-mini i {
      color: #3498db;
      font-size: 1.2em;
  }
  

• Sprite Sheet Adjustments Modify the sprite sheet path in vendor/legacy-icons/famfamfam-mini/dist/famfamfam-mini.css if needed (rare).

JavaScript Integration

• Dynamic Icon Loading Use JavaScript to toggle icons based on state:

  document.querySelector('.toggle-icon').addEventListener('click', function() {
      const icon = this.querySelector('i');
      icon.className = icon.className.replace('famfamfam-mini famfamfam-mini-icon', `famfamfam-mini famfamfam-mini-icon ${this.dataset.altIcon}`);
  });
  

Gotchas and Tips

Pitfalls

• Icon Naming Conflicts Some icons (e.g., page_white) may conflict with other libraries. Prefix classes:

  <i class="famfam-icon {{ famfamfam('page_white') }}"></i>
  

• Missing Icons Not all icons from the original FamFamFam set are included. Verify availability here.

• Blade Directive Scope The famfamfam() directive only works in Blade templates. For non-Blade views, use the raw class:

  <i class="famfamfam-mini famfamfam-mini-icon famfamfam-mini-icon-name"></i>
  

Debugging

• Inspect Rendered HTML Use browser dev tools to verify the correct class is applied:

  <!-- Correct -->
  <i class="famfamfam-mini famfamfam-mini-icon famfamfam-mini-icon-accept"></i>
  
  <!-- Incorrect (missing sprite class) -->
  <i class="famfamfam-mini-icon famfamfam-mini-icon-accept"></i>
  

• Clear Cache If icons don’t render, clear Laravel’s view cache:

  php artisan view:clear
  

Extension Points

• Add Custom Icons Extend the sprite sheet by modifying the CSS or adding a new sprite file and updating the package’s assets (requires local fork).

• Laravel Mix Integration Process the CSS through Laravel Mix for optimization:

  const mix = require('laravel-mix');
  
  mix.postCss('resources/css/app.css', 'public/css', [
      require('postcss-import'),
  ]);
  

• Dark Mode Support Add a dark-mode variant by overriding the sprite colors:

  .dark-mode .famfamfam-mini i {
      color: #ffffff;
      background-image: url('path/to/dark-sprite.png');
  }