Tabler Icons Component

​
GitHub - tabler/tabler-icons: A set of over 1450 free MIT-licensed high-quality SVG icons for you to use in your web projects.
GitHub
The Component
resources/views/components/tabler.blade.php
1
<!-- tabler icon, pulls from public/tabler folder. Accepts:
2
    strokeWidth   defaults to "1"
3
    class         defaults to "inline-block relative h-2"
4
-->
5
​
6
<svg viewBox="0 0 24 24" stroke="currentColor" 
7
    stroke-width="{{ $strokeWidth ?? 1 }}" 
8
    class="inline-block relative h-2 {{ $class ?? '' }}" 
9
    {{ $attributes->except(['class','icon']) }} 
10
>
11
    
12
    <use xlink:href="/tabler/tabler-sprite-nostroke.svg#tabler-{{$icon}}" />
13
​
14
</svg>
Copied!
Copy the component script into tabler.blade.php in the resources/views/components folder
Install the icons
Copy the icon svg sprite file from Github tabler/tabler-icons
Locate the file tabler-sprite-nostroke.svg and copy it into the folder  public/tabler/
Usage
Example usage:
Twitch icon with height 6 in the same colour as the parent element.
1
<x-tabler icon="brand-twitch" class="h-6" />
Copied!
Bucket icon in blue-500 and pushed up to align with the bottom of the text. Default stoke width of 1 is increased to 2.
1
<x-tabler wire:click="hello" 
2
    icon="bucket" 
3
    class="bottom-1 h-6 text-blue-500" 
4
    strokeWidth="2" />
Copied!
Notes:
Search for the icon name required at https://tablericons.com/​
Always remember to close the component with the /> 
If new icons are added just download a fresh copy of the svg file from Github. The project is under active development and new icons are being added regularly.
The approach uses the sprite map file for the icon set which is rather large at 300K+ . You may prefer to download the individual icon files and use the example above to find the correct file. At the time of writing, only individual icon files with 2px stroke weight are provided.
​
​

Dropdown animation

Next - Laravel

Password-less Login with Laravel 8

Last modified 1yr ago

Copy link

Contents

The Component

Install the icons

Usage