Weave Code
Ux Icons Laravel Package
symfony/ux-icons
Symfony UX Icons provides a simple way to use SVG icon packs in Symfony apps. Install popular sets, render icons in Twig or PHP, and manage them consistently across your UI with the Symfony UX tooling and asset pipeline.
Renders local and remote SVG icons in your Twig templates.
Frequently asked questions about Ux Icons
- Can I use Symfony UX Icons in Laravel without Twig (Blade-only projects)?
- Yes, but with a workaround. You can embed Twig templates for icons (e.g., `@twig('icons/{{ $name }}.svg')`) or generate SVGs directly in PHP. For Blade-only projects, consider a helper class to render raw SVG strings or use Twig as a micro-template engine for icons.
- How do I install Symfony UX Icons in Laravel?
- Run `composer require symfony/ux-icons` and install the Twig bundle (`symfony/twig-bundle` or standalone `symfony/twig`). If using Laravel’s Blade, ensure Twig is configured alongside it (e.g., via `laravel-bridge` or hybrid template support). No native Laravel service provider exists, so manual integration is required.
- Does Symfony UX Icons support remote SVG icons (e.g., CDN-hosted)?
- Yes, it supports both local and remote SVGs. For remote icons, you’ll need to handle caching manually (e.g., via Laravel’s `Cache` facade or CDN). Remote SVGs may introduce latency, so whitelist trusted domains and cache responses to mitigate performance issues.
- What Laravel versions are compatible with Symfony UX Icons?
- Symfony UX Icons works with Laravel 9+ (PHP 8.0+). It relies on Twig 3.4+, so ensure your Laravel project meets these requirements. No PHP 8.2+ specific features are used, so it remains backward-compatible with older Laravel 9/10 setups.
- How do I optimize SVG icons for production in Laravel?
- Use Laravel Mix or Vite to minify and sprite SVGs into a single file to reduce HTTP requests. For critical icons, inline them directly in HTML. Monitor SVG load times with tools like Laravel Telescope and implement caching (e.g., `Cache::remember()`) for remote icons.
- Are there security risks with remote SVG icons in Symfony UX Icons?
- Yes, remote SVGs can expose XXE (XML External Entity) risks if not sanitized. Mitigate this by whitelisting trusted domains, caching remote SVGs locally via Laravel’s `Storage` facade, and avoiding dynamic SVG content from untrusted sources.
- Can I use Symfony UX Icons with Livewire or Alpine.js for dynamic icons?
- Absolutely. Render icons in Twig components and include them in Livewire/Alpine views. For dynamic loading, use Twig’s `{% include %}` or a helper class to fetch icons on demand. Icons can also be loaded via JavaScript (e.g., Alpine.js) if cached locally.
- What’s the best way to structure SVG icons in a Laravel project?
- Organize SVGs in `/resources/svg/icons/` and create Twig templates (e.g., `icons/{name}.svg.twig`). Use a helper class (e.g., `app/Helpers/Icon.php`) to abstract Twig calls, like `Icon::render('check')`. For design systems, align with your existing UI framework (e.g., Tailwind classes).
- How do I fallback to Blade if Twig isn’t available in some views?
- Create a PHP helper (e.g., `Icon::svg('name')`) that generates raw SVG strings or uses Twig’s `Environment` to render icons. For Blade-only templates, include Twig icons via `@twig` directives or pre-render SVGs in PHP and output them directly in Blade.
- What are the alternatives to Symfony UX Icons for Laravel SVG icons?
- Alternatives include Laravel-specific packages like `laravel-svg-icons` or `spatie/laravel-icon-picker`, which offer tighter Laravel integration. For Twig users, `symfony/ux-icons` stands out for its SVG flexibility and Symfony ecosystem support. Font-based solutions (e.g., Font Awesome) are simpler but less performant.
Weaver
How can I help you explore Laravel packages today?