DEV Community

Cover image for How to use Simple Icons on Laravel Blade
Adrián UB for Ub Labs

Posted on • Updated on

How to use Simple Icons on Laravel Blade

Blade Simple Icons

A package to easily make use of Simple Icons in your Laravel Blade views.

Requirements

  • PHP 7.4 or higher
  • Laravel 8.0 or higher

Installation

You can install the package via composer:

composer require ublabs/blade-simple-icons
Enter fullscreen mode Exit fullscreen mode

Usage

Icons can be used as self-closing Blade components which will be compiled to SVG icons:

<x-simpleicon-laravel />
Enter fullscreen mode Exit fullscreen mode

You can also pass classes to your icon components:

<x-simpleicon-laravel class="w-6 h-6 text-red-500"/>
Enter fullscreen mode Exit fullscreen mode

And even use inline styles:

<x-simpleicon-laravel style="color: #FF2D20"/>
Enter fullscreen mode Exit fullscreen mode

Raw SVG Icons

If you want to use the raw SVG icons as assets, you can publish them using:

php artisan vendor:publish --tag=blade-simple-icons --force
Enter fullscreen mode Exit fullscreen mode

Then use them in your views like:

<img src="{{ asset('vendor/blade-simple-icons/laravel.svg') }}" width="10" height="10"/>
Enter fullscreen mode Exit fullscreen mode

GitHub logo ublabs / blade-simple-icons

A package to easily make use of Simple Icons in your Laravel Blade views.

Blade Simple Icons

Tests Latest Stable Version Total Downloads


A package to easily make use of Simple Icons in your Laravel Blade views.

For a full list of available icons see the SVG directory.

Requirements

  • PHP 7.4 or higher
  • Laravel 8.0 or higher

Installation

You can install the package via composer:

composer require ublabs/blade-simple-icons
Enter fullscreen mode Exit fullscreen mode

Usage

Icons can be used as self-closing Blade components which will be compiled to SVG icons:

<x-simpleicon-laravel />
Enter fullscreen mode Exit fullscreen mode

You can also pass classes to your icon components:

<x-simpleicon-laravel class="w-6 h-6 text-red-500"/>
Enter fullscreen mode Exit fullscreen mode

And even use inline styles:

<x-simpleicon-laravel style="color: #FF2D20"/>
Enter fullscreen mode Exit fullscreen mode

Raw SVG Icons

If you want to use the raw SVG icons as assets, you can publish them using:

php artisan vendor:publish --tag=blade-simple-icons --force
Enter fullscreen mode Exit fullscreen mode

Then use them in your views like:

<img src="{{ asset('vendor/blade-simple-icons/laravel.svg') }}" width=
Enter fullscreen mode Exit fullscreen mode

Top comments (0)