51 lines
999 B
Svelte
51 lines
999 B
Svelte
<script lang="ts">
|
|
import type { Component } from 'svelte';
|
|
|
|
let {
|
|
class: klass = '',
|
|
src,
|
|
alt = '',
|
|
size = 32,
|
|
black = false
|
|
}: {
|
|
class?: string;
|
|
src?: Component | string;
|
|
alt?: string;
|
|
size?: number;
|
|
black?: boolean;
|
|
} = $props();
|
|
|
|
const IconComponent: Component | undefined = $derived(
|
|
typeof src === 'function' ? src : undefined
|
|
);
|
|
|
|
function isUrl(src?: string) {
|
|
return src?.startsWith('/') || src?.startsWith('http');
|
|
}
|
|
</script>
|
|
|
|
<span
|
|
class="{klass} {black ? 'fill-slate-950' : 'fill-slate-50'} hover-icon"
|
|
style:width="{size}px"
|
|
style:height="{size}px"
|
|
>
|
|
{#if IconComponent}
|
|
<IconComponent width={size} height={size} color={black ? '#020618' : '#f8fafc'} />
|
|
{:else if typeof src === 'string' && isUrl(src)}
|
|
<img {src} {alt} width={size} height={size} />
|
|
{:else}
|
|
{alt ?? 'Без иконки'}
|
|
{/if}
|
|
</span>
|
|
|
|
<style>
|
|
@import '$src/app.css';
|
|
|
|
.hover-icon {
|
|
@apply block text-sm uppercase transition-all;
|
|
|
|
img {
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|