import type { HTMLAttributes } from "corvos/plugins/jsx.ts";

import site from "@/corvos.config.ts";

export type Props = HTMLAttributes<"svg"> & {
	icon: Parameters<typeof site.$.icon>[0];
	variant?: Parameters<typeof site.$.icon>[1];
};

export const Icon = ({ icon, variant, class: cls, ...props }: Props) => (
	<svg
		aria-hidden="true"
		class:list={["o-icon", cls]}
		height="1.142857143em"
		width="1.142857143em"
		{...props}
	>
		<use href={site.$.icon(icon, variant)} />
	</svg>
);