wireui / wireui

TallStack UI components
https://v1.wireui.dev
MIT License
1.37k stars 167 forks source link

implement tabler icons to be able to use them in the icon component #822

Open DiegoAlonso27 opened 5 months ago

DiegoAlonso27 commented 5 months ago

Is your feature request related to a problem? Please describe. I am a bit frustrated by the amount of icons there are to use.

Describe the solution you'd like to be able to use icons from other libraries

Describe alternatives you've considered I plan to make a contribution to the implementation of the tabler icons library.

Additional context I plan to do it in such a way that more than one icon library can be used at the same time if I can.

vogelor commented 5 months ago

Doing this is VERY easy

1) install "secondnetwork/blade-tabler-icons" with composer require 2) Publish the WireUI 2 Config 3) Change the Components in /config/wireui.php to

   'components' => Config::defaultComponents([
        'icon' => [
            'class' => null,
        ]
        // 'button' => [
        //     'alias' => 'new-button',
        // ],
        // 'mini-button' => [
        //     'class' => Components\Button\Mini::class,
        //     'alias' => 'new-mini-button',
        // ],
    ]),

to disable the WireUI-Icons

4) Add a file resources/views/components/icon.blade.php

5) Insert the following Content into this file:

@props(['name', 'strokeWidth' => 2])

@php
    $name = match ($name) {
        'eye-slash' => 'eye-off',
        // 'not-existing-tabler-icon-name' => 'existing-tabler-icon-name',
        default => $name
    };
@endphp
<x-dynamic-component component="tabler-{{ $name }}" {{ $attributes->merge(['stroke-width' => $strokeWidth]) }}/>

for me this solution works fine... Feel free to ask if you have any more questions.

P.S. There are some icon-Names that don' t exist in tabler icons. You can "translate" then inside the @php-section