Fix Icons

- Use internavel `x-svg`
- Move icon component after `input`/`select` elements

Author: robsontenorio

src/MaryServiceProvider.php

@@ -48,6 +48,9 @@ public function boot(): void
 
     public function registerComponents()
     {
+        // Just rename <x-icon> provided from BladeUI to <x-svg> to not collide with ours
+        Blade::component('BladeUI\Icons\Components\Icon', 'svg');
+
         Blade::component('alert', Alert::class);
         Blade::component('badge', Badge::class);
         Blade::component('button', Button::class);

src/View/Components/Icon.php

@@ -19,6 +19,11 @@ public function __construct(
         $this->uuid = md5(serialize($this));
     }
 
+    public function icon(): string
+    {
+        return "heroicon-{$this->name}";
+    }
+
     public function classes(): string
     {
         if (Str::contains($this->class, ['w-', 'h-'])) {
@@ -31,7 +36,7 @@ public function classes(): string
     public function render(): View|Closure|string
     {
         return <<<'HTML'
-                @svg("heroicon-{$name}", "$classes()")
+                <x-svg :name="$icon()" :class="$classes()" />
             HTML;
     }
 }

src/View/Components/Input.php

@@ -55,17 +55,7 @@ public function render(): View|Closure|string
                     </div>
                 @endif
 
-                <div class="flex-1 relative">     
-                    <!-- ICON  -->
-                    @if($icon)
-                        <x-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 ml-3 text-gray-400 " />
-                    @endif
-
-                    <!-- RIGHT ICON  -->
-                    @if($iconRight)
-                        <x-icon :name="$iconRight" class="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 " />
-                    @endif
-                    
+                <div class="flex-1 relative">                                            
                     <!-- MONEY SETUP -->
                     @if($money)
                         <div x-data="{display: ''}" x-init="display = $wire.{{ $modelName() }}?.replace('.', '{{ $fractionSeparator }}')">                                
@@ -99,6 +89,16 @@ public function render(): View|Closure|string
                         }}                                    
                     />
 
+                     <!-- ICON  -->
+                     @if($icon)
+                        <x-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 left-3 text-gray-400 " />
+                    @endif
+
+                    <!-- RIGHT ICON  -->
+                    @if($iconRight)
+                        <x-icon :name="$iconRight" class="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 " />
+                    @endif
+
                     <!-- INLINE LABEL -->
                     @if($label && $inline)
                         <label for="{{ $uuid }}" class="absolute text-gray-400 duration-300 transform -translate-y-1 scale-75 top-2 z-10 origin-[0] bg-white rounded dark:bg-gray-900 px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-1 @if($inline && $icon) left-9 @else left-3 @endif">

src/View/Components/Select.php

@@ -39,17 +39,7 @@ public function render(): View|Closure|string
                     <label class="label label-text font-semibold">{{ $label }}</label>
                 @endif
                 
-                <div class="relative">
-                    <!-- ICON -->
-                    @if($icon)
-                        <x-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 ml-3 text-gray-400" />                     
-                    @endif
-
-                    <!-- RIGHT ICON  -->
-                    @if($iconRight)
-                        <x-icon :name="$iconRight" class="absolute top-1/2 right-8 -translate-y-1/2 text-gray-400 " />
-                    @endif
-
+                <div class="relative">                 
                     <select 
                         {{ $attributes->whereDoesntStartWith('class') }} 
                         {{ $attributes->class([
@@ -71,6 +61,16 @@ public function render(): View|Closure|string
                         @endforeach
                     </select>
 
+                    <!-- ICON -->
+                    @if($icon)
+                        <x-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 left-3 text-gray-400" />                     
+                    @endif
+
+                    <!-- RIGHT ICON  -->
+                    @if($iconRight)
+                        <x-icon :name="$iconRight" class="absolute top-1/2 right-8 -translate-y-1/2 text-gray-400 " />
+                    @endif
+
                     <!-- INLINE LABEL -->
                     @if($label && $inline)                        
                         <label class="absolute text-gray-500 duration-300 transform -translate-y-1 scale-75 top-2 z-10 origin-[0] bg-white rounded dark:bg-gray-900 px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-1 @if($inline && $icon) left-9 @else left-3 @endif">