Svelte Usage

@avatar-generator/svelte provides an Avatar component that renders an <img> from any style. It works with Svelte 4 and Svelte 5; svelte is a peer dependency, so it uses whichever version your app pins.

Improved in v3

The published component is preprocessed to plain JavaScript. In v2 it shipped as <script lang="ts">, so it could not compile for any consumer without a preprocessor configured.

Installation

pnpm add @avatar-generator/core @avatar-generator/svelte @avatar-generator/style-initials

Basic usage

<script lang="ts">
    import Avatar from "@avatar-generator/svelte/Avatar.svelte";
    import { initials } from "@avatar-generator/style-initials";

    export let userId: string;
    export let userName: string;

</script>

<Avatar style={initials} options={{ seed: userId, name: userName, size: 48 }} alt={userName} />

You can also import from the package root:

import Avatar from "@avatar-generator/svelte";

Svelte’s build tooling resolves the "svelte" export condition to the component itself, so both imports work identically.

Using different styles

<script lang="ts">
    import Avatar from "@avatar-generator/svelte/Avatar.svelte";
    import { initials } from "@avatar-generator/style-initials";
    import { gradient } from "@avatar-generator/style-gradient";
    import { emoji } from "@avatar-generator/style-emoji";
    import { faces } from "@avatar-generator/style-faces";

    const common = { seed: "Hugo GB", size: 64 };

</script>

<Avatar style={initials} options={common} alt="Initials" />
<Avatar style={gradient} options={common} alt="Gradient" />
<Avatar style={emoji} options={common} alt="Emoji" />
<Avatar style={faces} options={common} alt="Faces" />

All eleven styles work the same way — see the Style Gallery.

TypeScript

Import the option type from the style package:

import { initials, type InitialsOptions } from "@avatar-generator/style-initials";

const options: InitialsOptions = { seed: "user-123", name: "Hugo GB", fontWeight: 700 };

Option types moved in v3

These types used to live in @avatar-generator/core. They now live in the style package that implements them. See the Migration Guide.

Props

Prop	Type	Default	Description
style	Style<T>	(required)	The style object to render with
options	T extends AvatarOptions	(required)	Seed and style-specific options
alt	string	"Avatar"	Alt text for the <img>
class	string	""	Class applied to the <img>

The component regenerates reactively, so reassigning style or options re-renders the avatar.

Server-side rendering

Safe in SvelteKit: createAvatar returns a string and touches no browser globals, so the avatar renders during SSR with nothing left to hydrate.