This package enables a directive @svg(..) which renders the SVG code from a given path or public URL.
This package includes, all free SVG icons from feathericons and heroicons. However, you can add any SVG icons to your project from multiple local paths. See below for details.
You can install the package via composer:
$ composer require cssjockey/laravel-svg
Optional: The service provider will automatically get registered. Or you may manually add the service provider in your config/app.php file:
'providers' => [
// ...
CSSJockey\LaravelSvg\LaravelSvgServiceProvider::class,
];
You can publish the config file config/laravel-svg.php
to add or manage the local paths this package looks for SVG icons.
$ php artisan vendor:publish --provider="CSSJockey\LaravelSvg\LaravelSvgServiceProvider"
Embedding SVG source from a public URL in your blade template.
@svg('https://cssjockey.com/public/test.svg')
Loading SVG source from a local path in your blade template.
@svg('feather/activity')
@svg('hero/wifi')
This will look for all the paths listed in the config/laravel-svg.php
file and the default package path.
The SVG files are loaded with full width and height. You can wrap the directive in a div to control the dimensions with a class or style attribute.
Example using tailwind width class:
<div class="w-6">
@svg('hero/wifi')
</div>
Example using style attribute:
<div style="width:24px">
@svg('hero/wifi')
</div>
IMPORTANT: If you wish to use <span>
or any other non-block tag, then you must apply style="display: inline-block"
to the that element.
Please see the changelog for more information on what has changed recently.
- Add more free icons to the package.
- Create an artisan command to optimize all the SVG files.
Please see contributing for details.
If you discover any security-related issues, please email admin@cssjockey.com instead of using the issue tracker.
Mohit Aneja All Contributors
MIT Please see the license for more information.