mirror of
https://github.com/Xevion/xevion.dev.git
synced 2026-01-31 04:26:43 -06:00
Xevion
eca50ef319
- Replace Font Awesome with Iconify (@iconify/json collections) - Add IconPicker component with search, collection filtering, lazy loading - Create authenticated icon API endpoints (search, collections, individual icons) - Update projects page to render icons via Icon.svelte component - Pre-cache common icon collections (Lucide, Simple Icons, etc.) on startup
30 lines
712 B
Svelte
30 lines
712 B
Svelte
<script lang="ts" module>
|
|
import { renderIconSVG } from "$lib/server/icons";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { cn } from "$lib/utils";
|
|
|
|
interface Props {
|
|
icon: string;
|
|
class?: string;
|
|
size?: number;
|
|
fallback?: string;
|
|
}
|
|
|
|
let { icon, class: className, size, fallback = "lucide:help-circle" }: Props = $props();
|
|
</script>
|
|
|
|
{#await renderIconSVG(icon, { class: cn("inline-block", className), size })}
|
|
<!-- Loading state during SSR (shouldn't be visible) -->
|
|
{:then svg}
|
|
{#if svg}
|
|
{@html svg}
|
|
{:else}
|
|
<!-- Fallback icon if primary fails -->
|
|
{#await renderIconSVG(fallback, { class: cn("inline-block", className), size }) then fallbackSvg}
|
|
{@html fallbackSvg}
|
|
{/await}
|
|
{/if}
|
|
{/await}
|