refactor: switch server icon customization to use Remix Icon font
- Added Remix Icon CDN CSS (remixicon@4.5.0) to layout - Replaced Heroicon components with Remix Icon font classes (ri-*) - Using dynamic icon class binding in Alpine.js for modal grid - Icon names updated to Remix format (e.g., server-line, github-line) - Added more icons including gaming, OS, and brand icons - Simplified icon rendering - no more individual template/x-if blocks
This commit is contained in:
@@ -6,6 +6,11 @@
|
||||
'statusPollingInterval' => '30s',
|
||||
])
|
||||
|
||||
{{-- Remix Icons for server icon customization --}}
|
||||
@once
|
||||
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet" />
|
||||
@endonce
|
||||
|
||||
@php
|
||||
$vmStatus = optional($status)->status;
|
||||
$pollSuffix = $statusPollingInterval ? '.' . $statusPollingInterval : '';
|
||||
@@ -49,93 +54,9 @@
|
||||
@php
|
||||
$iconStyle = $server->user_set_icon_color ? 'color: ' . $server->user_set_icon_color : '';
|
||||
@endphp
|
||||
@switch($server->user_set_icon)
|
||||
@case('server')<x-heroicon-o-server class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('server-stack')<x-heroicon-o-server-stack class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('computer-desktop')<x-heroicon-o-computer-desktop class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('cpu-chip')<x-heroicon-o-cpu-chip class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('circle-stack')<x-heroicon-o-circle-stack class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('cloud')<x-heroicon-o-cloud class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('command-line')<x-heroicon-o-command-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('code-bracket')<x-heroicon-o-code-bracket class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('code-bracket-square')<x-heroicon-o-code-bracket-square class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('globe-alt')<x-heroicon-o-globe-alt class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('globe-americas')<x-heroicon-o-globe-americas class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('globe-europe-africa')<x-heroicon-o-globe-europe-africa class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('globe-asia-australia')<x-heroicon-o-globe-asia-australia class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('wifi')<x-heroicon-o-wifi class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('signal')<x-heroicon-o-signal class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('shield-check')<x-heroicon-o-shield-check class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('shield-exclamation')<x-heroicon-o-shield-exclamation class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('lock-closed')<x-heroicon-o-lock-closed class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('lock-open')<x-heroicon-o-lock-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('key')<x-heroicon-o-key class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('rocket-launch')<x-heroicon-o-rocket-launch class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('paper-airplane')<x-heroicon-o-paper-airplane class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('bolt')<x-heroicon-o-bolt class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('fire')<x-heroicon-o-fire class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('sparkles')<x-heroicon-o-sparkles class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('star')<x-heroicon-o-star class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('heart')<x-heroicon-o-heart class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('home')<x-heroicon-o-home class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('home-modern')<x-heroicon-o-home-modern class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('building-office')<x-heroicon-o-building-office class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('building-office-2')<x-heroicon-o-building-office-2 class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('building-storefront')<x-heroicon-o-building-storefront class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('cube')<x-heroicon-o-cube class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('cube-transparent')<x-heroicon-o-cube-transparent class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('archive-box')<x-heroicon-o-archive-box class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('inbox')<x-heroicon-o-inbox class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('inbox-stack')<x-heroicon-o-inbox-stack class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('folder')<x-heroicon-o-folder class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('folder-open')<x-heroicon-o-folder-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('cog-6-tooth')<x-heroicon-o-cog-6-tooth class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('cog-8-tooth')<x-heroicon-o-cog-8-tooth class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('wrench-screwdriver')<x-heroicon-o-wrench-screwdriver class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('wrench')<x-heroicon-o-wrench class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('beaker')<x-heroicon-o-beaker class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('bug-ant')<x-heroicon-o-bug-ant class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('puzzle-piece')<x-heroicon-o-puzzle-piece class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('chart-bar')<x-heroicon-o-chart-bar class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('chart-pie')<x-heroicon-o-chart-pie class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('presentation-chart-line')<x-heroicon-o-presentation-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('currency-dollar')<x-heroicon-o-currency-dollar class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('currency-euro')<x-heroicon-o-currency-euro class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('banknotes')<x-heroicon-o-banknotes class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('credit-card')<x-heroicon-o-credit-card class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('user')<x-heroicon-o-user class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('user-circle')<x-heroicon-o-user-circle class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('user-group')<x-heroicon-o-user-group class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('users')<x-heroicon-o-users class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('envelope')<x-heroicon-o-envelope class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('envelope-open')<x-heroicon-o-envelope-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('chat-bubble-left')<x-heroicon-o-chat-bubble-left class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('chat-bubble-left-right')<x-heroicon-o-chat-bubble-left-right class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('camera')<x-heroicon-o-camera class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('video-camera')<x-heroicon-o-video-camera class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('film')<x-heroicon-o-film class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('musical-note')<x-heroicon-o-musical-note class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('book-open')<x-heroicon-o-book-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('document-text')<x-heroicon-o-document-text class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('sun')<x-heroicon-o-sun class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('moon')<x-heroicon-o-moon class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('swatch')<x-heroicon-o-swatch class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('paint-brush')<x-heroicon-o-paint-brush class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('trophy')<x-heroicon-o-trophy class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('academic-cap')<x-heroicon-o-academic-cap class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('light-bulb')<x-heroicon-o-light-bulb class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('finger-print')<x-heroicon-o-finger-print class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('eye')<x-heroicon-o-eye class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('map')<x-heroicon-o-map class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('map-pin')<x-heroicon-o-map-pin class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('clock')<x-heroicon-o-clock class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('calendar')<x-heroicon-o-calendar class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('gift')<x-heroicon-o-gift class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@case('cake')<x-heroicon-o-cake class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
|
||||
@default<x-heroicon-o-server class="size-5 text-base/60 transition-transform group-hover:scale-110" />
|
||||
@endswitch
|
||||
<i class="ri-{{ $server->user_set_icon }} text-xl transition-transform group-hover:scale-110" style="{{ $iconStyle }}"></i>
|
||||
@else
|
||||
<x-heroicon-o-server class="size-5 text-base/60 transition-transform group-hover:scale-110" />
|
||||
<i class="ri-server-line text-xl text-base/60 transition-transform group-hover:scale-110"></i>
|
||||
@endif
|
||||
</button>
|
||||
<span class="text-2xl font-bold">
|
||||
@@ -1006,22 +927,27 @@
|
||||
selectedColor: @entangle('selectedIconColor'),
|
||||
searchQuery: '',
|
||||
icons: [
|
||||
'server', 'server-stack', 'computer-desktop', 'cpu-chip', 'circle-stack',
|
||||
'cloud', 'command-line', 'code-bracket', 'code-bracket-square',
|
||||
'globe-alt', 'globe-americas', 'globe-europe-africa', 'globe-asia-australia',
|
||||
'wifi', 'signal', 'shield-check', 'shield-exclamation', 'lock-closed', 'lock-open', 'key',
|
||||
'rocket-launch', 'paper-airplane', 'bolt', 'fire', 'sparkles', 'star', 'heart',
|
||||
'home', 'home-modern', 'building-office', 'building-office-2', 'building-storefront',
|
||||
'cube', 'cube-transparent', 'archive-box', 'inbox', 'inbox-stack', 'folder', 'folder-open',
|
||||
'cog-6-tooth', 'cog-8-tooth', 'wrench-screwdriver', 'wrench', 'beaker', 'bug-ant', 'puzzle-piece',
|
||||
'chart-bar', 'chart-pie', 'presentation-chart-line',
|
||||
'currency-dollar', 'currency-euro', 'banknotes', 'credit-card',
|
||||
'user', 'user-circle', 'user-group', 'users',
|
||||
'envelope', 'envelope-open', 'chat-bubble-left', 'chat-bubble-left-right',
|
||||
'camera', 'video-camera', 'film', 'musical-note',
|
||||
'book-open', 'document-text', 'sun', 'moon', 'swatch', 'paint-brush',
|
||||
'trophy', 'academic-cap', 'light-bulb', 'finger-print', 'eye',
|
||||
'map', 'map-pin', 'clock', 'calendar', 'gift', 'cake'
|
||||
'server-line', 'database-2-line', 'computer-line', 'cpu-line', 'hard-drive-2-line',
|
||||
'cloud-line', 'terminal-box-line', 'code-s-slash-line', 'braces-line',
|
||||
'global-line', 'earth-line', 'wifi-line', 'signal-tower-line',
|
||||
'shield-check-line', 'shield-keyhole-line', 'lock-line', 'lock-unlock-line', 'key-2-line',
|
||||
'rocket-line', 'rocket-2-line', 'send-plane-line', 'flashlight-line', 'fire-line',
|
||||
'sparkling-line', 'star-line', 'heart-line', 'home-line', 'home-2-line',
|
||||
'building-line', 'building-2-line', 'store-line', 'box-3-line', 'archive-line',
|
||||
'inbox-line', 'inbox-2-line', 'folder-line', 'folder-open-line',
|
||||
'settings-3-line', 'settings-4-line', 'tools-line', 'hammer-line',
|
||||
'flask-line', 'bug-line', 'puzzle-line', 'bar-chart-box-line', 'pie-chart-line',
|
||||
'line-chart-line', 'money-dollar-circle-line', 'money-euro-circle-line',
|
||||
'bank-card-line', 'wallet-line', 'user-line', 'user-3-line', 'group-line', 'team-line',
|
||||
'mail-line', 'mail-open-line', 'chat-3-line', 'discuss-line',
|
||||
'camera-line', 'vidicon-line', 'film-line', 'music-line',
|
||||
'book-open-line', 'file-text-line', 'sun-line', 'moon-line',
|
||||
'palette-line', 'brush-line', 'trophy-line', 'graduation-cap-line',
|
||||
'lightbulb-line', 'fingerprint-line', 'eye-line', 'map-2-line', 'map-pin-line',
|
||||
'time-line', 'calendar-line', 'gift-line', 'cake-2-line',
|
||||
'gamepad-line', 'ghost-line', 'aliens-line', 'space-ship-line',
|
||||
'android-line', 'apple-line', 'windows-line', 'ubuntu-line',
|
||||
'github-line', 'gitlab-line', 'discord-line', 'slack-line'
|
||||
],
|
||||
colors: [
|
||||
'', '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#10b981',
|
||||
@@ -1063,7 +989,7 @@
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold">Customize Server Icon</h3>
|
||||
<button @click="$wire.closeIconModal()" class="text-base/50 hover:text-base transition-colors">
|
||||
<x-heroicon-o-x-mark class="size-5" />
|
||||
<i class="ri-close-line text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Search -->
|
||||
@@ -1079,12 +1005,12 @@
|
||||
<div class="size-16 rounded-xl bg-background-secondary border-2 border-neutral flex items-center justify-center"
|
||||
:style="selectedColor ? 'border-color: ' + selectedColor : ''">
|
||||
<template x-if="selectedIcon">
|
||||
<span x-html="document.querySelector('[data-icon-preview=\'' + selectedIcon + '\']')?.innerHTML || ''"
|
||||
class="size-8"
|
||||
:style="selectedColor ? 'color: ' + selectedColor : ''"></span>
|
||||
<span class="size-8 flex items-center justify-center" :style="selectedColor ? 'color: ' + selectedColor : ''">
|
||||
<i class="text-3xl" :class="'ri-' + selectedIcon"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="!selectedIcon">
|
||||
<x-heroicon-o-server class="size-8 text-base/40" />
|
||||
<i class="ri-server-line text-3xl text-base/40"></i>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
@@ -1117,88 +1043,9 @@
|
||||
class="aspect-square rounded-lg border flex items-center justify-center transition-all duration-150 hover:bg-background hover:border-primary/50"
|
||||
:class="selectedIcon === icon ? 'bg-primary/10 border-primary ring-2 ring-primary/30' : 'border-neutral'"
|
||||
:data-icon-preview="icon">
|
||||
<template x-if="icon === 'server'"><x-heroicon-o-server class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'server-stack'"><x-heroicon-o-server-stack class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'computer-desktop'"><x-heroicon-o-computer-desktop class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'cpu-chip'"><x-heroicon-o-cpu-chip class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'circle-stack'"><x-heroicon-o-circle-stack class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'cloud'"><x-heroicon-o-cloud class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'command-line'"><x-heroicon-o-command-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'code-bracket'"><x-heroicon-o-code-bracket class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'code-bracket-square'"><x-heroicon-o-code-bracket-square class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'globe-alt'"><x-heroicon-o-globe-alt class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'globe-americas'"><x-heroicon-o-globe-americas class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'globe-europe-africa'"><x-heroicon-o-globe-europe-africa class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'globe-asia-australia'"><x-heroicon-o-globe-asia-australia class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'wifi'"><x-heroicon-o-wifi class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'signal'"><x-heroicon-o-signal class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'shield-check'"><x-heroicon-o-shield-check class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'shield-exclamation'"><x-heroicon-o-shield-exclamation class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'lock-closed'"><x-heroicon-o-lock-closed class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'lock-open'"><x-heroicon-o-lock-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'key'"><x-heroicon-o-key class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'rocket-launch'"><x-heroicon-o-rocket-launch class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'paper-airplane'"><x-heroicon-o-paper-airplane class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'bolt'"><x-heroicon-o-bolt class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'fire'"><x-heroicon-o-fire class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'sparkles'"><x-heroicon-o-sparkles class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'star'"><x-heroicon-o-star class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'heart'"><x-heroicon-o-heart class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'home'"><x-heroicon-o-home class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'home-modern'"><x-heroicon-o-home-modern class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'building-office'"><x-heroicon-o-building-office class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'building-office-2'"><x-heroicon-o-building-office-2 class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'building-storefront'"><x-heroicon-o-building-storefront class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'cube'"><x-heroicon-o-cube class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'cube-transparent'"><x-heroicon-o-cube-transparent class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'archive-box'"><x-heroicon-o-archive-box class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'inbox'"><x-heroicon-o-inbox class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'inbox-stack'"><x-heroicon-o-inbox-stack class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'folder'"><x-heroicon-o-folder class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'folder-open'"><x-heroicon-o-folder-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'cog-6-tooth'"><x-heroicon-o-cog-6-tooth class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'cog-8-tooth'"><x-heroicon-o-cog-8-tooth class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'wrench-screwdriver'"><x-heroicon-o-wrench-screwdriver class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'wrench'"><x-heroicon-o-wrench class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'beaker'"><x-heroicon-o-beaker class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'bug-ant'"><x-heroicon-o-bug-ant class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'puzzle-piece'"><x-heroicon-o-puzzle-piece class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'chart-bar'"><x-heroicon-o-chart-bar class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'chart-pie'"><x-heroicon-o-chart-pie class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'presentation-chart-line'"><x-heroicon-o-presentation-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'currency-dollar'"><x-heroicon-o-currency-dollar class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'currency-euro'"><x-heroicon-o-currency-euro class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'banknotes'"><x-heroicon-o-banknotes class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'credit-card'"><x-heroicon-o-credit-card class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'user'"><x-heroicon-o-user class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'user-circle'"><x-heroicon-o-user-circle class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'user-group'"><x-heroicon-o-user-group class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'users'"><x-heroicon-o-users class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'envelope'"><x-heroicon-o-envelope class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'envelope-open'"><x-heroicon-o-envelope-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'chat-bubble-left'"><x-heroicon-o-chat-bubble-left class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'chat-bubble-left-right'"><x-heroicon-o-chat-bubble-left-right class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'camera'"><x-heroicon-o-camera class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'video-camera'"><x-heroicon-o-video-camera class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'film'"><x-heroicon-o-film class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'musical-note'"><x-heroicon-o-musical-note class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'book-open'"><x-heroicon-o-book-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'document-text'"><x-heroicon-o-document-text class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'sun'"><x-heroicon-o-sun class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'moon'"><x-heroicon-o-moon class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'swatch'"><x-heroicon-o-swatch class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'paint-brush'"><x-heroicon-o-paint-brush class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'trophy'"><x-heroicon-o-trophy class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'academic-cap'"><x-heroicon-o-academic-cap class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'light-bulb'"><x-heroicon-o-light-bulb class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'finger-print'"><x-heroicon-o-finger-print class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'eye'"><x-heroicon-o-eye class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'map'"><x-heroicon-o-map class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'map-pin'"><x-heroicon-o-map-pin class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'clock'"><x-heroicon-o-clock class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'calendar'"><x-heroicon-o-calendar class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'gift'"><x-heroicon-o-gift class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<template x-if="icon === 'cake'"><x-heroicon-o-cake class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
|
||||
<span class="size-5 flex items-center justify-center" :style="selectedColor ? 'color: ' + selectedColor : ''">
|
||||
<i class="text-xl" :class="'ri-' + icon"></i>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user