Svg Inline Bundle Laravel Package

Getting Started

Minimal Setup

1. Install the Bundle Run:

   composer require artack/svg-inline-bundle
   

2. Register the Bundle Add to config/bundles.php:

   Artack\SvgInlineBundle\SvgInlineBundle::class => ['all' => true],
   

3. Configure the Base Path Create config/packages/artack_svg_inline.yaml:

   svg_inline:
       path: "%kernel.project_dir%/assets/svg"  # Adjust path to your SVG directory
   

4. First Use Case Inline an SVG in a Twig template:

   {{ svg_inline('logo.svg') }}
   

Implementation Patterns

Core Workflow

• Embedding SVGs Use the svg_inline() Twig function to replace <img> tags with inline SVG:

  {{ svg_inline('icon.svg', { class: 'icon', width: 24, height: 24 }) }}
  

  Renders as:

  <svg class="icon" width="24" height="24" ...>...</svg>
  

• Dynamic Paths Override the base path per template:

  {{ svg_inline('custom.svg', { path: 'assets/custom-svgs' }) }}
  

• Reusable Components Combine with Twig includes for modular icons:

  {% include 'components/icon.html.twig' with { name: 'twitter.svg', size: '2x' } %}
  

Integration Tips

• CSS/JS Optimization Inline SVGs reduce HTTP requests but increase HTML payload. Use sparingly for critical icons.
• Cache Control Cache compiled SVGs in production (e.g., via Symfony’s cache system) to avoid reprocessing.
• Asset Pipeline Pair with Webpack Encore or Vite for preprocessing SVGs (e.g., optimizing paths) before inlining.

Gotchas and Tips

Pitfalls

• Path Resolution Ensure svg_inline.path in config points to an absolute directory (relative paths may fail in production). Fix: Use %kernel.project_dir% for reliability.

• SVG Validation Malformed SVGs (e.g., unclosed tags) will break rendering. Validate files pre-commit:

  composer require --dev squizlabs/php_codesniffer
  vendor/bin/phpcs --standard=PSR12 assets/svg/*.svg
  

• Twig Autoloading If svg_inline() fails, verify Twig’s loader includes the bundle’s templates:

  // config/packages/twig.yaml
  twig:
      paths: ['%kernel.project_dir%/vendor/artack/svg-inline-bundle/Resources/views']
  

Debugging

• Check Logs Enable debug mode (APP_DEBUG=true) to log missing SVG files:

  # config/packages/monolog.yaml
  handlers:
      main:
          level: debug
  

• Verify File Permissions Ensure the SVG directory is readable by the web server:

  chmod -R 755 assets/svg
  

Extension Points

• Custom Filters Extend the bundle by adding Twig filters to modify SVG output:

  {{ svg_inline('logo.svg')|svg_add_viewbox('0 0 100 100') }}
  

  Implementation: Override the bundle’s SvgInlineExtension class.

• Dynamic Attributes Use Twig’s merge to append attributes dynamically:

  {% set attrs = { 'aria-label': 'Close', 'role': 'button' } %}
  {{ svg_inline('close.svg', attrs|merge({ class: 'btn-icon' })) }}
  

• Fallback for Missing SVGs Handle missing files gracefully:

  {% if svg_inline('missing.svg') is not empty %}
      {{ svg_inline('missing.svg') }}
  {% else %}
      <span class="svg-fallback">✕</span>
  {% endif %}