Feathericon Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require ameotoko/feathericon-bundle
   

2. Enable Bundle: Add to config/bundles.php:

   Ameotoko\FeatherIcon\AmeotokoFeatherIconBundle::class => ['all' => true],
   

3. First Use Case: Use in Twig templates:

   {{ feathericon('send') }}
   

   This renders the default Feather icon for "send" with no customization.

Where to Look First

• Twig Function Reference: Check the php-feather docs for supported icon names and options.
• Bundle Configuration: No additional config is needed beyond enabling the bundle.

Implementation Patterns

Basic Usage

• Inline Icon Rendering:

  {{ feathericon('home', {size: 24, color: '#4a6fa5'}) }}
  

• Reusable Components: Create a Twig macro for consistent styling:

  {% macro icon(name, options={}) %}
    <span class="icon-wrapper">
      {{ feathericon(name, options) }}
    </span>
  {% endmacro %}
  

  Usage:

  {{ _self.icon('search', {size: 18, color: '#666'}) }}
  

Integration with Symfony Forms

• Button Icons:

  <button type="submit" class="btn">
    {{ feathericon('save') }} Save
  </button>
  

• Form Field Icons:

  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-text">
      {{ feathericon('search', {size: 16, color: '#ccc'}) }}
    </span>
  </div>
  

Dynamic Icons via Controller

Pass icon data from the controller:

// src/Controller/SomeController.php
public function index(): Response
{
    return $this->render('template.html.twig', [
        'icon' => 'settings',
        'iconOptions' => ['size' => 20, 'color' => '#ff5722'],
    ]);
}

{{ feathericon(icon, iconOptions) }}

SVG Optimization

• Inline SVG: The bundle renders SVG directly, so optimize via:

  {{ feathericon('edit', {stroke: '#000', 'stroke-width': 2, 'fill': 'none'}) }}
  

• External SVG: For complex icons, consider embedding SVG files directly and using the bundle for simple icons.

Gotchas and Tips

Pitfalls

• Icon Name Sensitivity: Feather icon names are case-sensitive (e.g., send vs Send). Use lowercase as per FeatherIcons.
• Twig Auto-escaping: If icons appear escaped, wrap in |raw:

  {{ feathericon('icon-name')|raw }}
  

• Missing Icons: If an icon fails silently, verify the name exists in php-feather.

Debugging

• Check Rendered Output: Use Twig’s dump to inspect the icon:

  {{ dump(feathericon('icon-name', options)) }}
  

• Console Debugging: Test icon rendering in a controller:

  $icons = new \Feather\Icons();
  echo $icons->get('icon-name', ['stroke' => '#000']);
  

Configuration Quirks

• No Bundle Config: The bundle requires no additional configuration beyond enabling it.
• Dependency Conflicts: Ensure pixelrobin/php-feather is compatible with your PHP version (^7.4 || ^8.0).

Extension Points

• Custom Icons: Extend the bundle by creating a custom Twig extension:

  // src/Twig/Extension/CustomFeatherExtension.php
  class CustomFeatherExtension extends \Twig\Extension\AbstractExtension
  {
      public function getFunctions()
      {
          return [
              new \Twig\TwigFunction('customFeatherIcon', [$this, 'renderCustomIcon']),
          ];
      }
  
      public function renderCustomIcon(string $name, array $options = [])
      {
          // Custom logic here
          return (new \Feather\Icons())->get($name, $options);
      }
  }
  

• Caching: For performance, cache rendered icons in a service:

  // src/Service/FeatherIconCache.php
  class FeatherIconCache
  {
      private $cache = [];
  
      public function get(string $name, array $options = []): string
      {
          $key = md5($name . serialize($options));
          if (!isset($this->cache[$key])) {
              $this->cache[$key] = (new \Feather\Icons())->get($name, $options);
          }
          return $this->cache[$key];
      }
  }
  

Performance Tips

• Pre-render Icons: For frequently used icons, pre-render them in a base template or layout.
• Minimize Options: Avoid overly complex SVG options (e.g., gradients) if not needed, as they increase payload size.