<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>
