UAvatar

Deterministic SVG avatar generator for any name.

Features

• Deterministic: The same name always generates the same avatar.
• Unique: Uses randomized shapes, colors, and gradients.
• Universal: Works in Node.js and the browser.
• Lightweight: Returns a simple SVG string.

Installation

npm install uavatar

Usage

import { generateAvatar } from 'uavatar';

// Basic usage
const svg = generateAvatar('Joe');

// With options
const customSvg = generateAvatar('Joe', {
  seed: 'custom-seed', // Optional: separate seed from text
  shape: 'circle'      // Optional: 'square' (default) or 'circle'
});

Framework Examples

React

import { generateAvatar } from 'uavatar';

function Avatar({ name }) {
  return <div dangerouslySetInnerHTML={{ __html: generateAvatar(name) }} />;
}

Vue

<script setup>
import { generateAvatar } from 'uavatar';
defineProps(['name']);
</script>

<template>
  <div v-html="generateAvatar(name)" />
</template>

Svelte

<script>
  import { generateAvatar } from 'uavatar';
  export let name;
</script>

{@html generateAvatar(name)}

License

MIT