Blade Bootstrap Icons Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require davidhsianturi/blade-bootstrap-icons
   

   No publisher or service provider needed—just use the Blade directive immediately.

2. First Usage Add the directive to your Blade template:

   @bootstrapIcons
   

   Now you can use icons like this:

   <i class="bi bi-heart"></i>
   

3. Where to Look First

   • Package README (if available) for icon naming conventions.
   • Bootstrap Icons Documentation for icon reference.
   • Check resources/views for existing Blade templates to see how icons are integrated.

Implementation Patterns

Common Workflows

1. Direct Icon Usage Embed icons inline in Blade:

   <button>
       <i class="bi bi-check-circle-fill"></i> Confirm
   </button>
   

2. Dynamic Icons via Variables Use Blade variables to switch icons dynamically:

   <i class="bi bi-{{ $status === 'active' ? 'check' : 'x' }}"></i>
   

3. Component-Based Icons Create reusable Blade components:

   @component('icons.button', ['icon' => 'bi-bell'])
       Notifications
   @endcomponent
   

4. Integration with Tailwind CSS Combine with Tailwind for styling:

   <i class="bi bi-arrow-right text-blue-500"></i>
   

5. Lazy-Loading Icons Load icons only when needed (e.g., in AJAX responses):

   @if($showIcon)
       @bootstrapIcons
       <i class="bi bi-search"></i>
   @endif
   

Integration Tips

• Asset Optimization: Ensure the Bootstrap Icons CSS/JS is loaded in your layout file (e.g., app.blade.php).

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  

• Icon Sets: Use the package alongside other icon sets (e.g., Font Awesome) by namespacing classes:

  <i class="fas fa-star"></i> <!-- Font Awesome -->
  <i class="bi bi-star"></i>   <!-- Bootstrap Icons -->
  

• Dark Mode: Bootstrap Icons support dark mode via CSS variables. Use:

  .bi { color: var(--bs-icon-color); }
  

Gotchas and Tips

Pitfalls

1. Missing CSS/JS

   • Issue: Icons render as empty boxes or broken.
   • Fix: Ensure the Bootstrap Icons CSS is loaded in your layout. The package only provides Blade directives, not assets.
   • Debug: Check browser dev tools for 404 errors on bootstrap-icons.css.

2. Icon Naming Conflicts

   • Issue: Some icons (e.g., bi-arrow-up) may conflict with custom CSS classes.
   • Fix: Use the full class name or namespace:

     <i class="bootstrap-icons bi bi-arrow-up"></i>
     

3. Caching Issues

   • Issue: Changes to Blade templates aren’t reflected after clearing cache.
   • Fix: Run:

     php artisan view:clear
     php artisan cache:clear
     

4. Version Mismatch

   • Issue: Icons appear broken if the package version doesn’t match the Bootstrap Icons CDN version.
   • Fix: Align versions in composer.json and CDN links. Example:

     <!-- Use version 1.11.3 if package targets it -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     

Debugging Tips

• Inspect Element: Verify the class attribute includes bi and the correct icon name (e.g., bi bi-heart).
• Check Console: Look for errors like Failed to load resource for missing CSS/JS.
• Fallback Icons: Use a fallback icon or text if an icon fails to load:

  <i class="bi bi-heart @error('icon') text-danger @enderror"></i>
  

Extension Points

1. Custom Icon Sets Extend the package by adding your own icons to the Blade directive. Example:

   @inject('icons', 'Davidhsianturi\BladeBootstrapIcons\BootstrapIconsServiceProvider')
   @php $icons->addCustomIcon('bi-custom', 'path/to/custom-icon.svg'); @endphp
   

   (Note: Requires modifying the package or creating a wrapper.)

2. Dynamic Icon Loading Load icons conditionally based on user roles or settings:

   @if(auth()->user()->can('admin'))
       @bootstrapIcons
       <i class="bi bi-gear"></i>
   @endif
   

3. Icon Size Utilities Combine with Laravel Mix/PurgeCSS to generate utility classes for icon sizing:

   /* resources/css/app.css */
   .icon-sm { font-size: 0.75rem; }
   .icon-lg { font-size: 1.5rem; }
   

   Usage:

   <i class="bi bi-heart icon-lg"></i>
   

4. Local Development For local testing, link the Bootstrap Icons CSS directly from node_modules:

   <link rel="stylesheet" href="{{ asset('node_modules/bootstrap-icons/font/bootstrap-icons.css') }}">