<script lang="ts">
	import Icon from '@iconify/svelte';

	let className: string = '';
	export { className as class };
	export let src: string | null = null;
	export let text: string;
	export let size: number = 32;
	export let black: boolean = false;

	let isUrl;
	$: isUrl = src?.startsWith('/') || src?.startsWith('http');
</script>

<div
	class="{className} {black
		? 'fill-slate-950'
		: 'fill-slate-50'} text-sm uppercase transition-all"
>
	{#if src}
		{#if isUrl}
			<img {src} alt={text} width={size} height={size} />
		{:else}
			<Icon width={size} height={size} icon={src} color={black ? '#020618' : '#f8fafc'} />
		{/if}
	{:else}
		{text}
	{/if}
</div>

<style>
</style>
