沈
顾
林
林
<div class="demo-row"> <span class="icen-avatar icen-avatar--xs">沈</span> <span class="icen-avatar icen-avatar--sm">顾</span> <span class="icen-avatar"><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect width='48' height='48' fill='%23d97757'/><circle cx='24' cy='18' r='8' fill='%23fffdf9'/><path d='M8 44c3-10 10-14 16-14s13 4 16 14z' fill='%23fffdf9'/></svg>" alt="林晚晴" /></span> <span class="icen-avatar icen-avatar--lg">林</span></div>特性
- 尺寸：
icen-avatar--xs20 /--sm28 / 默认 36 /--lg48 /--xl80px - 内容：文字兜底或
img填充（object-fit: cover）
安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/avatar';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add avatar
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/media.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
<span class="icen-avatar">沈</span><span class="icen-avatar icen-avatar--lg"><img src="…" alt="名字" /></span>