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
<template>
<div class="flex items-center gap-3">
<HiveAvatar username="barddev" size="lg" />
<span>@barddev</span>
</div>
</template>
<script setup lang="ts">
import { HiveAvatar } from "@hiveio/honeycomb-vue";
</script>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
<template>
<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 -->
</template>Custom styling
<template>
<!-- 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>
</template>