| <script lang="ts"> |
| import type { Component } from 'svelte'; |
| import { |
| Tent, |
| Trees, |
| Image, |
| AudioLines, |
| MessageSquare, |
| Code, |
| Server, |
| Compass, |
| Footprints, |
| Mountain, |
| Flag, |
| CirclePlay, |
| ArrowLeftRight, |
| Star, |
| Check, |
| ArrowRight, |
| MapPin, |
| Link, |
| FileText, |
| BookOpen, |
| Mail, |
| Zap, |
| Box, |
| LayoutGrid, |
| Clock, |
| Globe, |
| Smile, |
| X, |
| GitBranch, |
| Plus, |
| Menu, |
| Unplug, |
| Target, |
| Palette, |
| Cpu, |
| Share2, |
| NotebookPen, |
| TriangleAlert |
| } from '@lucide/svelte'; |
|
|
| interface Props { |
| name: string; |
| size?: number; |
| stroke?: string; |
| sw?: number; |
| class?: string; |
| rotate?: number; |
| } |
| let { name, size = 24, stroke = 'currentColor', sw = 1.6, class: cls = '', rotate }: Props = $props(); |
|
|
| const MAP: Record<string, Component> = { |
| shed: Tent, |
| trees: Trees, |
| image: Image, |
| wave: AudioLines, |
| chat: MessageSquare, |
| code: Code, |
| server: Server, |
| compass: Compass, |
| boot: Footprints, |
| mountain: Mountain, |
| flag: Flag, |
| play: CirclePlay, |
| swap: ArrowLeftRight, |
| star: Star, |
| check: Check, |
| arrow: ArrowRight, |
| pin: MapPin, |
| link: Link, |
| doc: FileText, |
| book: BookOpen, |
| mail: Mail, |
| bolt: Zap, |
| cube: Box, |
| grid: LayoutGrid, |
| clock: Clock, |
| plus: Plus, |
| menu: Menu, |
| close: X, |
| unplug: Unplug, |
| target: Target, |
| palette: Palette, |
| cpu: Cpu, |
| share: Share2, |
| notebook: NotebookPen, |
| alert: TriangleAlert, |
| // social / external — neutral generic marks (no brand logos) |
| globe: Globe, |
| hug: Smile, |
| xsocial: X, |
| github: GitBranch |
| }; |
|
|
| const Cmp = $derived(MAP[name] ?? Star); |
| const style = $derived(rotate !== undefined ? `transform: rotate(${rotate}deg)` : undefined); |
| </script> |
|
|
| <Cmp {size} color={stroke} strokeWidth={sw} class={cls} {style} aria-hidden="true" /> |
|
|
