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