README

Allows to inline Font Awesome 5+'s SVG icons without javascript via a simple Laravel Blade directive.

Installation

Install composer package

You can install it using Composer:

composer require hebinet/laravel-svg-icons

Optionally, you can also publish the config file of the package.

php artisan vendor:publish --provider="Hebinet\SvgIcons\ServiceProvider" --tag=config

Install SVG font

As a next step you need to install Font Awesome via npm:

npm install @fortawesome/fontawesome-free

The path to the SVG files in the npm package is configured by default.

But you can change the path via the config parameter path_to_fontawesome in config\icons.php if you want to.

Add Font Awesome SVG CSS-Style

To display the icons correctly you need to add an additional css file which can be found in the npm @fortawesome/fontawesome-free package.

I would recommend using Webpack to publish the file in the public/css directory.

// Inside webpack.mix.js

mix.copy('node_modules/@fortawesome/fontawesome-free/css/svg-with-js.css', 'public/css/svg-icons.css');

Afterwards you need to add the svg-icons.css file in the head section of your site.

<link rel="stylesheet" href="{{ mix('/css/svg-icons.css') }}"/>

In order to inherit the font color of the parent correctly you have to add the following style declaration in your global CSS file

svg.svg-inline--fa {
    fill: currentColor;
}

Usage

You can now add the new @icon blade directive to add the inline SVG icon. The argument for the directive is the same as you would use for Font Awesome icons.

You can use the directive as followed:

@icon('{style} {icon} {optional addtitonal classes},{optional title}')

Examples

Usage in a Blade view:

{{-- Plain icon --}}
@icon('fas fa-download')

{{-- Icon with additional size class --}}
@icon('fas fa-download fa-5x')

{{-- And here with an additional title --}}
@icon('fas fa-download,Download button')
@icon('fas fa-download fa-5x,Download button')

Usage in a Controller method or normal PHP code:

$icon = new Hebinet\SvgIcons\Icon('fas fa-download');

$iconWithAddClass = new Hebinet\SvgIcons\Icon('fas fa-download fa-5x');

$iconWithTitle = new Hebinet\SvgIcons\Icon('fas fa-download,Download Button');

// You can now render the icon to a string and do what ever you want with it
$svgContent = $icon->render();

Optionally you can omit the icon string from the constructor and instead provide it in the render method like this

$icon = new Hebinet\SvgIcons\Icon();
$svgContent = $icon->render('fas fa-download');

This package also provides an Icon Facade. Unfortunately, the way Facades work, you have to provide the icon string in the render method instead of the constructor.

First you have to 'register' the Facade in you app.php file at the end of the alias array like this

[
    ...

    'Icon' => Hebinet\SvgIcons\Facades\Icon::class,
]

After that you can use the Facade like this

$svgContent = Icon::render('fas fa-check');

Additional Route

If the setting $config['route']['enabled'] is true (default: true), an additional route will be registered to provide an Url-Based fetch for the SVG Icon Content.

With this route you can load the Icon via a normal GET-Operation, so you can use the Icon also in "Non Blade"-Scenarios like Vue-Components.

You can use it like this:

/svgIcons/{style}/{icon}.svg
or
/svgIcons/{style}/{icon}.svg?title={title}

It will throw an Symfony\Component\HttpKernel\Exception\NotFoundHttpException if the requested icon doesn't exist.

Examples

// Plain icon
/svgIcons/fas/fa-download.svg

// And here with an additional title
/svgIcons/fas/fa-download.svg?title=Download button

Accessibility

• role="img" is added to the SVG tag by default
• aria-hidden="true" is added to the SVG tag by default unless a <title> is set

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email office@hebinet.at instead of using the issue tracker.

License

The MIT License (MIT). Please see License File for more information.