Avatar experimental
Ark UI Avatar 기반 wrapper입니다. Root, Image, Fallback anatomy를 제공합니다.
Preview
정민 
수아
도 
<script lang="ts">
import * as Avatar from '@odbd/svelte/avatar'
interface Person {
name: string
initials: string
role: string
src?: string
}
function profileImage(label: string, background: string) {
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><rect width="96" height="96" rx="48" fill="${background}"/><text x="48" y="55" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" font-weight="700" fill="white">${label}</text></svg>`
return `data:image/svg+xml,${encodeURIComponent(svg)}`
}
const people: Person[] = [
{
name: '정민',
initials: '정민',
src: profileImage('정', '#2563eb'),
role: '시스템 운영',
},
{
name: '수아',
initials: '수아',
role: '디자인 시스템',
},
{
name: '도윤',
initials: '도',
src: profileImage('도', '#0f766e'),
role: '제품 개발',
},
]
</script>
<div class="avatar-demo">
{#each people as person}
<div class="avatar-demo__item">
<Avatar.Root data-size="md">
<Avatar.Fallback>{person.initials}</Avatar.Fallback>
{#if person.src}
<Avatar.Image src={person.src} alt={`${person.name} 프로필`} />
{/if}
</Avatar.Root>
<div class="avatar-demo__meta">
<strong>{person.name}</strong>
<span>{person.role}</span>
</div>
</div>
{/each}
</div>
<style>
.avatar-demo {
display: grid;
width: min(100%, 30rem);
gap: var(--odbd-space-3);
}
.avatar-demo__item {
display: flex;
align-items: center;
gap: var(--odbd-space-3);
}
.avatar-demo__meta {
display: flex;
min-width: 0;
flex-direction: column;
gap: var(--odbd-space-1);
}
.avatar-demo__meta strong {
color: var(--odbd-color-foreground);
font-size: var(--odbd-font-size-md);
}
.avatar-demo__meta span {
color: var(--odbd-color-muted-foreground);
font-size: var(--odbd-font-size-sm);
}
</style>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Avatar from '@odbd/svelte/avatar' import { Avatar } from '@odbd/react/avatar'