<script lang="ts">
import type { IconId } from '$lib/types/icon-ids';

export let id: IconId;
export let size: number | string ;
export let className: string = '';
$: dimensions = typeof size === 'number' ? `${size}px` : size;


</script>

<svg  {...$$restProps}
			role="img"
			class={className}
			aria-hidden="true"
			width={dimensions?dimensions:24}
			height={dimensions?dimensions:24}
>
	<use href={`#${id}`} />
</svg>



<style>
    .app-icon {
        /* 确保图标与文本基线对齐 */
        vertical-align: middle;
        /* 防止用户选择图标，提高用户体验 */
        user-select: none;
        /* 默认显示为行内块级元素 */
        display: inline-block;
        /* 确保它能响应 CSS 动画 */
        transition: color 0.2s, transform 0.2s;
    }
</style>

