---
import { Icons } from './icons';

interface Props {
	name: keyof typeof Icons;
	label?: string;
	color?: string;
	size?: string;
	class?: string;
}

const { name, label, size = '1em', color } = Astro.props;
const a11yAttrs = label ? ({ 'aria-label': label } as const) : ({ 'aria-hidden': 'true' } as const);
---

<svg height="1em" viewBox="0 0 512 512"
	{...a11yAttrs}
	class={Astro.props.class}
	fill="currentColor"
	set:html={Icons[name]}
/>


<style define:vars={{ 'sl-icon-color': color, 'sl-icon-size': size }}>
	svg {
		color: var(--sl-icon-color);
		font-size: var(--sl-icon-size, 1em);
		width: 1em;
		height: 1em;
	}
</style>