Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Phosphoricon as default option #825

Open
sclause2412 opened this issue Nov 21, 2023 · 1 comment
Open

Phosphoricon as default option #825

sclause2412 opened this issue Nov 21, 2023 · 1 comment
Assignees

Comments

@sclause2412
Copy link

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:

  • Installed it with composer require wireui/phosphoricons
  • Add an option in WireUI config:
return [
    ...
    'components' => Config::defaultComponents([
        ...
        'icon' => [
            'alias' => 'hero-icon',
        ],
        ...
    ]),
    ...
];

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
Copy link
Author

Forgot to mention: This is for V2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants