Famfamfam Silk Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require legacy-icons/famfamfam-silk
   

   Add the package's CSS to your resources/css/app.css (or equivalent):

   @import 'legacy-icons/famfamfam-silk/silk';
   

2. First Use Case Use the icon in Blade:

   <span class="silk-icon silk-icon-{{ icon-name }}"></span>
   

   Example:

   <span class="silk-icon silk-icon-page_white_text"></span>
   

3. Where to Look

   • Sprite Sheet: resources/vendor/legacy-icons/famfamfam-silk/silk.png
   • CSS: resources/vendor/legacy-icons/famfamfam-silk/silk.css (contains all icon classes)
   • Documentation: Check the original Silk Icon Set for icon names.

Implementation Patterns

Common Workflows

1. Dynamic Icon Rendering Use a helper function in a Blade directive or PHP:

   // In AppServiceProvider's boot()
   Blade::directive('silk', function ($icon) {
       return "<span class='silk-icon silk-icon-{$icon}'></span>";
   });
   

   Usage:

   @silk('page_white_text')
   

2. Icon Sets in Components Create a reusable component (Laravel 8+):

   php artisan make:component SilkIcon
   

   // app/View/Components/SilkIcon.php
   public $name;
   public function render() {
       return view('components.silk-icon', ['name' => $this->name]);
   }
   

   <!-- resources/views/components/silk-icon.blade.php -->
   <span class="silk-icon silk-icon-{{ $name }}"></span>
   

   Usage:

   <x-silk-icon name="page_white_text" />
   

3. Integration with Tailwind CSS Extend your tailwind.config.js to include Silk icons as custom classes:

   module.exports = {
       corePlugins: {
           prefix: false, // Disable default Tailwind prefix
       },
       safelist: [
           {
               pattern: /silk-icon-.*/,
           },
       ],
   };
   

4. Icon Mapping for Localization Store icon names in a config file (config/silk-icons.php) and map them to user-friendly keys:

   return [
       'dashboard' => 'page_white_text',
       'settings' => 'wrench_orange',
   ];
   

   Usage:

   config('silk-icons.dashboard'); // Returns 'page_white_text'
   

Gotchas and Tips

Pitfalls

1. Icon Naming Confusion

   • Silk icons use underscores (page_white_text), not hyphens (page-white-text).
   • Fix: Double-check the original Silk Icon Set for exact names.

2. Sprite Sheet Limitations

   • The sprite sheet is fixed-size (16x16px by default). Icons may appear pixelated if scaled up.
   • Fix: Use inline SVG or a CDN-hosted version (e.g., Font Awesome) for larger icons.

3. CSS Specificity Conflicts

   • If using a CSS framework (e.g., Bootstrap), Silk icon classes might be overridden.
   • Fix: Add a wrapper class with !important or increase specificity:

     .silk-wrapper .silk-icon {
         background-image: url('silk.png') !important;
     }
     

4. Missing Icons

   • Not all Silk icons are included in this package (original set has ~700 icons; this package may have fewer).
   • Fix: Fall back to a CDN or use a different icon set (e.g., Font Awesome).

Debugging Tips

1. Inspect the Sprite Sheet Use browser dev tools to verify the sprite sheet path:

   .silk-icon-page_white_text {
       background-image: url('silk.png') !important;
   }
   

   If broken, check:

   • File permissions in vendor/legacy-icons/famfamfam-silk.
   • Correct path in public/vendor/legacy-icons/famfamfam-silk/silk.png (may need to publish assets).

2. Fallback for Missing Icons Add a default icon class to avoid broken icons:

   .silk-icon {
       display: inline-block;
       width: 16px;
       height: 16px;
       background-image: url('silk.png');
       background-position: 0 0;
   }
   .silk-icon-missing {
       background-position: -16px -16px; /* Fallback icon */
   }
   

Extension Points

1. Custom Sprite Sheets Override the default sprite sheet by publishing the package assets:

   php artisan vendor:publish --tag=silk-icons
   

   Then replace silk.png in public/vendor/legacy-icons/famfamfam-silk/.

2. Dynamic Icon Loading Lazy-load icons for performance:

   // Using Alpine.js
   <span x-data="{ loaded: false }" x-on:mouseover="loaded = true">
       <span x-show="!loaded" class="silk-icon silk-icon-loading"></span>
       <span x-show="loaded" class="silk-icon silk-icon-page_white_text"></span>
   </span>
   

3. Dark Mode Support Add a dark-mode variant by duplicating the sprite sheet and adjusting CSS:

   .dark .silk-icon-dark {
       background-image: url('silk-dark.png') !important;
   }