fix(Avatar): swapped out Icon

docs(avatar): updated examples, props, and slots tables

src/lib/components/avatar/Placeholder.svelte

@@ -8,7 +8,8 @@
 	import { useContext } from '../../utils/useContext';
 	import { getContext, setContext } from 'svelte/internal';
 	import { twMerge } from 'tailwind-merge';
-	import Icon from './Icon.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import { account } from '../../icons';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
@@ -23,14 +24,37 @@
 		component: 'Avatar.Placeholder'
 	});
 
-	const { shape }: { shape: 'circle' | 'rounded' | 'square' } = getContext(AVATAR_CONTEXT_ID);
+	const {
+		shape,
+		size
+	}: { shape: 'circle' | 'rounded' | 'square'; size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' } =
+		getContext(AVATAR_CONTEXT_ID);
 
 	setContext(AVATAR_PLACEHOLDER_CONTEXT_ID, {
 		placeholder: true
 	});
 
+	let iconContainerClass = 'absolute text-light-icon dark:text-dark-icon h-full w-full';
+	let iconSize = '';
+	if (size === 'xs') {
+		iconContainerClass += ' bottom-[-0.25rem]';
+		iconSize = '24px';
+	} else if (size === 'sm') {
+		iconContainerClass += ' bottom-[-0.35rem]';
+		iconSize = '32px';
+	} else if (size === 'md') {
+		iconContainerClass += ' bottom-[-0.5rem]';
+		iconSize = '40px';
+	} else if (size === 'lg') {
+		iconContainerClass += ' text-6xl bottom-[-0.6rem]';
+		iconSize = '48px';
+	} else if (size === 'xl') {
+		iconContainerClass += ' bottom-[-0.75rem]';
+		iconSize = '64px';
+	}
+
 	let defaultClass =
-		'absolute inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-light-icon-background dark:bg-dark-icon-background';
+		'absolute text-light-icon dark:text-dark-icon inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-light-icon-background dark:bg-dark-icon-background';
 	if (shape === 'circle') {
 		defaultClass += ' rounded-full';
 	} else if (shape === 'rounded') {
@@ -52,7 +76,9 @@
 	{#if $$slots.icon}
 		<slot name="icon" />
 	{:else}
-		<Icon class="text-light-icon dark:text-dark-icon" />
+		<span class={iconContainerClass}>
+			<Icon data={account} size={iconSize} />
+		</span>
 	{/if}
 </div>
 

src/lib/components/avatar/index.ts

@@ -1,22 +1,15 @@
 import OriginalAvatar from './Avatar.svelte';
 import Indicator from './Indicator.svelte';
-import OriginalPlaceholder from './Placeholder.svelte';
-import Icon from './Icon.svelte';
+import Placeholder from './Placeholder.svelte';
 
 const Avatar = OriginalAvatar as AvatarStatic;
 Avatar.Indicator = Indicator;
-Avatar.Placeholder = OriginalPlaceholder as PlaceholderStatic;
-Avatar.Placeholder.Icon = Icon;
+Avatar.Placeholder = Placeholder;
 
 export default Avatar;
 
 export interface AvatarStatic {
 	new (...args: ConstructorParameters<typeof OriginalAvatar>): OriginalAvatar;
 	Indicator: typeof Indicator;
-	Placeholder: PlaceholderStatic;
-}
-
-export interface PlaceholderStatic {
-	new (...args: ConstructorParameters<typeof OriginalPlaceholder>): OriginalPlaceholder;
-	Icon: typeof Icon;
+	Placeholder: typeof Placeholder;
 }

src/routes/avatar/+page.svelte

@@ -6,7 +6,6 @@
 		exampleInitials,
 		props,
 		slots,
-		iconSlots,
 		placeholderSlots,
 		indicatorProps
 	} from './examples';
@@ -120,10 +119,6 @@
 	<SlotsTable component="Avatar.Placeholder" slots={placeholderSlots} />
 </Col>
 
-<Col class="col-24">
-	<SlotsTable component="Avatar.Placeholder.Icon" slots={iconSlots} />
-</Col>
-
 <Col class="col-24">
 	<PropsTable component="Avatar.Indicator" props={indicatorProps} />
 </Col>

src/routes/avatar/examples.ts

@@ -50,14 +50,6 @@ export const placeholderSlots: Slot[] = [
 	{
 		id: '1',
 		slot: 'icon',
-		component: '<Avatar.Placeholder.Icon slot="icon" />'
-	}
-];
-
-export const iconSlots: Slot[] = [
-	{
-		id: '1',
-		slot: 'default',
 		component: ''
 	}
 ];