fix: ensure Remix Icon CSS loads and add SVG fallback for default icon

- Added inline CSS link as fallback (in addition to @push)
- Changed default icon to use <x-ri-server-line> SVG component instead of font icon
- This ensures icon displays even if CDN CSS hasn't loaded yet
This commit is contained in:
2025-12-06 09:19:47 -05:00
parent 1a96bfdee0
commit 374713faa6

View File

@@ -6,10 +6,10 @@
'statusPollingInterval' => '30s',
])
{{-- Remix Icons for server icon customization --}}
@once
{{-- Remix Icons CSS for server icon customization --}}
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet" />
@endonce
@endpush
@php
$vmStatus = optional($status)->status;
@@ -17,6 +17,9 @@
$pollAttribute = $statusPolling ? 'wire:poll' . $pollSuffix . '="loadVmStatus"' : '';
@endphp
{{-- Inline load Remix Icons CSS as fallback --}}
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet" />
<div {!! $pollAttribute !!} class="flex flex-col" style="min-height: calc(100vh - 30rem);">
@if($server->status === 'active')
@@ -56,7 +59,7 @@
@endphp
<i class="ri-{{ $server->user_set_icon }} text-xl transition-transform group-hover:scale-110" style="{{ $iconStyle }}"></i>
@else
<i class="ri-server-line text-xl text-base/60 transition-transform group-hover:scale-110"></i>
<x-ri-server-line class="size-5 text-base/60 transition-transform group-hover:scale-110" />
@endif
</button>
<span class="text-2xl font-bold">