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

sertxudev profile image

Filament: Generate Resource from Existing DB Schema

Sergio Peris -

lancemdev profile image

Geeking Out Over Laravel Prism

Lance Munyao -

msnmongare profile image

SQLSTATE[42S02]: Base table or view not found: 1146 Table 'planner_v2_be.role_user' doesn't exist

Sospeter Mong'are -

mshsayket profile image

How to create like and dislike system in laravel 11

Saddam Hossain -