The low-level <Avatar> component lets you swap rendering algorithms or plug in your own.
<script setup>
import { Avatar, gradientAvatarAlgorithm } from '@maxnth/gestalt'
</script>
<template>
<Avatar
seed="user-123"
:size="80"
:algorithm="gradientAvatarAlgorithm"
/>
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
seed | string | number | — | Any value; passed through to the algorithm. |
size | number | 32 | Rendered size in pixels. |
radius | number | string | "9999px" | Corner radius. Number is pixels; string is CSS. |
algorithm | AvatarAlgorithm | — | Algorithm object with name and render. |
options | unknown | — | Algorithm-specific options. |
renderSize | number | 256 | Internal canvas resolution. |
ariaLabel | string | — | Accessible label for the canvas. |
ring | boolean | number | string | false | Optional outline. true = white 2px ring. |
style | object | — | Extra inline styles merged onto the wrapper. |
An algorithm is just an object with name and render:
import type { AlgorithmRenderContext, AvatarAlgorithm } from '@maxnth/gestalt'
const stripeAlgorithm: AvatarAlgorithm = {
name: 'stripe',
render({ ctx, size }: AlgorithmRenderContext, options) {
const opts = options as { color?: string }
const segments = 4
const segmentHeight = size / segments
ctx.fillStyle = opts?.color ?? '#3b82f6'
for (let i = 0; i < segments; i += 2) {
ctx.fillRect(0, i * segmentHeight, size, segmentHeight)
}
},
}
Then pass it to <Avatar>:
<Avatar
seed="stripe-demo"
:size="96"
:algorithm="stripeAlgorithm"
:options="{ color: '#10b981' }"
/>