Skip to content

Effortlessly integrate SVG images into your Blade templates with this convenient package, offering a seamless way to work with inline icons.

License

Notifications You must be signed in to change notification settings

orchidsoftware/blade-icons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Inline SVG Icons for Laravel Blade

Packagist Packagist Version

This package for the Laravel framework allows you to use Blade components to insert inline SVG images.

Installation

To install this package, run the following command in your command line:

$ composer require orchid/blade-icons

Basic Usage

To register a directory with your files in the service provider, use the following code:

namespace App\Providers;

use Orchid\Icons\IconFinder;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot(IconFinder $iconFinder) : void
    {
        $iconFinder->registerIconDirectory('fa', storage_path('app/fontawesome'));
    }
}

When calling the directory method with the first argument, we pass the prefix to call our icons and the second argument is the directory where they are located.

After that, we can call the component in our blade templates:

<x-orchid-icon path="fa.home" />

If you use one or two sets of icons that do not repeat, then it is not necessary to specify a prefix in the component:

<x-orchid-icon path="home" />

You can also list some attributes that should be applied to your icon:

<x-orchid-icon 
    path="home" 
    class="icon-big" 
    width="2em" 
    height="2em" />

Static call from a PHP class:

IconComponent::make(
    path: 'fa.home',
    id: 101,
    class: 'red',
);

Default Sizes

If you are using icons from the same set, it makes sense to specify a default size value:

namespace App\Providers;

use Orchid\Icons\IconFinder;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot(IconFinder $iconFinder) : void
    {
        $iconFinder
            ->registerIconDirectory('fa', storage_path('app/fontawesome'))
            ->setSize('54px', '54px');
    }
}

If you use different sets, for example, in the public part of the application and in the admin panel, then you can dynamically change the value in the middleware:

namespace App\Http\Middleware;
 
use Closure;
use Orchid\Icons\IconFinder;
 
class ExampleMiddleware
{
    /**
     * @var \Orchid\Icons\IconFinder 
     */
    protected $iconFinder;

    /**
     * ExampleMiddleware constructor.
     *
     * @param IconFinder $iconFinder
     */
    public function __construct(IconFinder $iconFinder)
    {
        $this->iconFinder = $iconFinder;
    }

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    { 
        $iconFinder->setSize('54px', '54px');

        return $next($request);
    }
}

About

Effortlessly integrate SVG images into your Blade templates with this convenient package, offering a seamless way to work with inline icons.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks