File Icons Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require moox/file-icons
   

   Publish the config file (if needed):

   php artisan vendor:publish --provider="Moox\FileIcons\FileIconsServiceProvider"
   

2. Basic Usage: Register the service provider in config/app.php (if not auto-discovered):

   'providers' => [
       Moox\FileIcons\FileIconsServiceProvider::class,
   ],
   

3. First Use Case: Display an icon for a file in a Blade view:

   {!! file_icon('document.pdf') !!}
   

   Or with custom size:

   {!! file_icon('document.pdf', '2x') !!}
   

Key Configuration

Check config/file-icons.php for:

• Default icon set (SVGRepo collection URL)
• Fallback icon behavior
• Custom icon mappings

Implementation Patterns

Common Workflows

1. Dynamic File Icon Rendering: Use in file managers, CMS previews, or code editors:

   @foreach($files as $file)
       <div class="file-item">
           {!! file_icon($file->extension) !!}
           <span>{{ $file->name }}</span>
       </div>
   @endforeach
   

2. Custom Icon Sets: Override defaults via config:

   'icons' => [
       'pdf' => 'custom-pdf-icon.svg',
       'default' => 'custom-fallback.svg',
   ],
   

3. Integration with Laravel Filesystem: Fetch icons dynamically from stored files:

   $icon = file_icon($file->extension, '1x');
   

4. Conditional Icons: Combine with Laravel helpers:

   @if($file->isImage())
       {!! file_icon('image', '2x') !!}
   @else
       {!! file_icon($file->extension) !!}
   @endif
   

Advanced Patterns

• Caching Icons: Cache rendered icons in a Blade directive:

  Blade::directive('cachedIcon', function ($expression) {
      return "<?php echo cache()->remember('file_icon_{$expression}', now()->addHours(1), function() use({$expression}) { echo file_icon({$expression}); }); ?>";
  });
  

  Usage:

  @cachedIcon('document.pdf')
  

• Icon Size Management: Use a helper to standardize sizes:

  function getIconSize($fileType) {
      return in_array($fileType, ['image', 'video']) ? '2x' : '1x';
  }
  

  {!! file_icon($file->extension, getIconSize($file->extension)) !!}
  

Gotchas and Tips

Pitfalls

1. Extension Mismatch:

   • Ensure file extensions are lowercase (e.g., .PDF → .pdf).
   • Use strtolower() if parsing from user input:

     $extension = strtolower(pathinfo($file->name, PATHINFO_EXTENSION));
     

2. Missing Icons:

   • The package defaults to a generic file icon. Verify config/file-icons.php for default icon settings.
   • Debug with:

     dd(file_icon('unknown_extension', null, true)); // Returns raw icon data
     

3. SVG Injection Risks:

   • Always escape dynamic SVG content in Blade:

     {!! htmlspecialchars(file_icon($file->extension), ENT_QUOTES) !!}
     

   • Or use Blade::escape() for safer rendering.

4. Caching Issues:

   • Clear config cache after updating file-icons.php:

     php artisan config:clear
     

Debugging Tips

• Log Icon Data:

  \Log::debug('Icon data:', [
      'extension' => $file->extension,
      'raw_icon' => file_icon($file->extension, null, true),
  ]);
  

• Inspect SVGRepo Collection: Check the SVGRepo collection for missing icons and update the config.

Extension Points

1. Custom Icon Resolver: Bind a custom resolver in AppServiceProvider:

   FileIcons::extend('custom', function ($extension) {
       return file_get_contents(storage_path("app/icons/{$extension}.svg"));
   });
   

   Usage:

   {!! file_icon('document.pdf', '1x', 'custom') !!}
   

2. Blade Directives: Create a shorthand directive:

   Blade::directive('fileicon', function ($expression) {
       return "<?php echo file_icon({$expression}); ?>";
   });
   

   Usage:

   @fileicon('document.pdf')
   

3. Livewire/Alpine Integration: Dynamically update icons on file change:

   // Alpine.js
   <div x-data="{ icon: 'document.pdf' }">
       @{{ $icon }}
       {!! file_icon($icon) !!}
   </div>