DEV Community

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

Posted on • Edited on

How to use Simple Icons on Laravel Blade

#laravel #svg #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
View on GitHub

Top comments (0)

Read next

manashjb profile image

Stop Trying to Learn Everything -Focus on These 5 Key Skills Every Developer Needs

Manash Jyoti Baruah -

xxzeroxx profile image

PHP Design Patterns: Front Controller

Antonio Silva -

andreamendez profile image

Domina el arte del análisis de datos junto a AWS

Andrea Méndez Ortiz -

ayoola_damilare_212d5bde0 profile image

My React Journey: Day 23

Ayoola Damilare -