HiveAvatar

Display Hive user profile pictures with automatic fallback.

Hive Avatars

Avatars are loaded from images.hive.blog/u/username/avatar. Falls back to colored initials when image fails to load.

Usage

<script lang="ts">
  import { HiveAvatar } from "@hiveio/honeycomb-svelte";
</script>

<div class="flex items-center gap-3">
  <HiveAvatar username="barddev" size="lg" />
  <span>@barddev</span>
</div>

Preview

Props

Prop	Type	Default
`username`	`string`	required
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`
`className` / `class`	`string`	-
`showBorder`	`boolean`	`false`
`fallbackColor`	`string`	-

Examples

Preset sizes

<HiveAvatar username="barddev" size="xs" />  <!-- 24px -->
<HiveAvatar username="barddev" size="sm" />  <!-- 32px -->
<HiveAvatar username="barddev" size="md" />  <!-- 40px -->
<HiveAvatar username="barddev" size="lg" />  <!-- 48px -->
<HiveAvatar username="barddev" size="xl" />  <!-- 64px -->

Custom styling

<!-- Custom styling with class -->
<HiveAvatar
  username="barddev"
  class="ring-2 ring-hive-red ring-offset-2"
/>

<!-- With border -->
<HiveAvatar
  username="barddev"
  class="border-2 border-hive-red"
/>

<!-- Overlapping avatars -->
<div class="flex -space-x-2">
  <HiveAvatar username="barddev" class="border-2 border-background" />
  <HiveAvatar username="blocktrades" class="border-2 border-background" />
  <HiveAvatar username="arcange" class="border-2 border-background" />
</div>

API Tracker User Card