The enflow/laravel-svg package provides a easy way include SVGs in your templates.
You can install the package via composer:
composer require enflow/laravel-svgYou may use the svg helper in your templates
{{ svg('clock') }}
// Adding a class
{{ svg('clock')->class('mr-2') }}
// Adding an extra attribute
{{ svg('clock')->class('mr-2')->id('clock-icon') }}
// Specify the pack
{{ svg('clock')->pack('fas') }}You may publish the config to set the packs that you are using:
Pushing the config file:
php artisan vendor:publish --provider="Enflow\Svg\SvgServiceProvider"You may specify multiple packs that are used in your application. By default, only the resources/img/svgs pack is included, but you may specify additional icon sets like Font Awesome in your config. When the pack isn't specified when including the SVG, the first one that can be found in the order defined in your config will be used. You may overrule this behavior by calling the pack method on the Enflow\Svg\Svg class that's returned by the SVG helper.
<?php
return [
'packs' => [
'custom' => resource_path('img/svgs/'),
'fas' => [
'path' => base_path('vendor/fortawesome/font-awesome/svgs/solid/'),
'auto_size_on_viewbox' => true,
],
'fal' => [
'path' => base_path('vendor/fortawesome/font-awesome/svgs/light/'),
'auto_size_on_viewbox' => true,
],
],
];composer require fortawesome/font-awesome
Reference: https://github.com/FortAwesome/Font-Awesome
<?php
return [
'packs' => [
'custom' => resource_path('img/svgs/'),
'fas' => [
'path' => base_path('vendor/fortawesome/font-awesome/svgs/solid/'),
'auto_size_on_viewbox' => true,
],
],
];yarn add @fortawesome/fontawesome-pro
Font Awesome 5 doesn't provide a composer package. We'll install it through our npm/yarn pipeline and use that path instead
Reference: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers
<?php
return [
'packs' => [
'custom' => resource_path('img/svgs/'),
'fas' => [
'path' => base_path('node_modules/@fortawesome/fontawesome-pro/svgs/solid/'),
'auto_size_on_viewbox' => true,
],
],
];This package includes the Enflow\Svg\Middleware\InjectSvgSpritesheet middleware which is automatically registered and added to your web group.
This will add the SVG spritesheet to the top of your templates, where all unique SVGs are added. The SVGs rendered in your templates will reference this spritesheet. The reason for this is that in a loop, the SVG only is once in the body, instead of repeating it per row.
You may disable the automatic injection by setting the register_middleware_automatically to false:
<?php
return [
'register_middleware_automatically' => false
];When using enflow/laravel-svg in combination with another middleware that must always be executed after the SVGs are injected in the response, you may use the $middlewarePriority logic on the Laravel router to ensure it's always run after.
The order in this array is counterintuitive: at first must the CacheResponse middleware be specified, and then the SVG injection middleware. This is due to the way middleware responses are build. This ensures that first the SVGs are injected, and that complete response is cached.
Example for usage with spatie/laravel-responsecache
protected $middlewarePriority = [
...
\Spatie\ResponseCache\Middlewares\CacheResponse::class,
\Enflow\Svg\Middleware\InjectSvgSpritesheet::class,
];
$ composer testPlease see CONTRIBUTING for details.
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
- github.com/jerodev/laravel-font-awesome for the idea
- github.com/adamwathan/blade-svg for the research
- github.com/spatie for the GitHub actions test workflow
Enflow is a digital creative agency based in Alphen aan den Rijn, Netherlands. We specialize in developing web applications, mobile applications and websites. You can find more info on our website.
The MIT License (MIT). Please see License File for more information.