wireui / wireui

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

Phosphoricon as default option #825

Open sclause2412 opened 5 months ago

sclause2412 commented 5 months ago

Is your feature request related to a problem? Please describe. Currently there is a Phosphoricon repository which contains all the icons. This is very nice as it is very easy to install and it supports the blade technology same as for Heroicons. However to use it I have to make two steps:

Without this configuration the <x-icon name="..." /> call uses Heroicons by default, with this option Phosphoricons are used and if I still want to use Heroicons I can do <x-hero-icon name="..." />.

The only problem I cannot solve is the fact that other components (like <x-password ... >) is using WireUi::component('icon') directive which internally results in <x-hero-icon.... There is no possibility to change the icons to Phosphoricons there and therefore my page has a mixture.

Describe the solution you'd like Configuration option to replace Heroicons completely with Phosphoricons.

return [
    ...
    /*
    |--------------------------------------------------------------------------
    | Icon library
    |--------------------------------------------------------------------------
    |
    | This option controls the icon library which is used for WireUI components.
    | The prefix <x-icon ...> results to the selected library.
    | If you want to use an icon of a specific library directly you can used e.g. 
    | <x-heroicons::mini.solid.user class="w-5 h-5" />
    |
    | Possible options:
    |  'heroicons' => Use Heroicons library
    |  'phosphor' => Use Phosphor Icons library 
    |  null => Do not show icons by default (<x-icon> will replaced by empty string)
    |
     */

    'iconlibrary' => 'heroicons',

Describe alternatives you've considered If this is too complicate to add then maybe a workaround could be to add an icon parameter which overrides the default icon by a user icon from a different library. Examples: <x-password ... /> use Eye from Heroicons <x-password phosphor="eye" ... /> use Eye from Phosphor Icons <x-button icon="user" ... /> use User from Heroicons <x-button phosphor="user" ... /> use User from Phosphor Icons

Additional context Example of current problem: image This is just a simplified example (not used in real world) but it easily shows the problem: Two icons which show same content but look different as first one is Heroicons and second one is Phosphor.

sclause2412 commented 5 months ago

Forgot to mention: This is for V2