How to use Font Awesome 5 SVGs with Laravel Blade
I’ve been a huge fan of Font Awesome from the start and I think they made great improvements with their 5th version.
I’ve not used Font Awesome in a long time and since then I used SVGs almost all the time. So when I decided to use Font Awesome 5 I was a little bit frustrated to see how uneasy it was to use their library.
Today I found a way to use Font Awesome 5 SVGs directly within Blade.
Blade SVG + Font Awesome 5
Blade SVG is a nice little package that adds a new directive for either inline SVG or SVG sprites. As it only supports one spritesheet, I’ll use the inline option.
Here’s how to install it with Composer:
composer require nothingworks/blade-svg
Then publish the config file:
php artisan vendor:publish --provider="BladeSvg\BladeSvgServiceProvider"
config/blade-svg.php to add the
icon class to all the SVGs.
'class' => 'icon', // Add the `icon` class to every SVG when rendered
Download Font Awesome 5 (Free or Pro) and copy the
advanced-options/raw-svg contents to your application
You’re ready, you can start using it in your templates:
You’ll see that by default, the icons are really huge and not styled. That’s why I added the
icon class. Here’s how I define it in my CSS:
Voilà! You’re good to go.