Svelte-Boring-Avatars

A Svelte port of Boring Avatars.

Demo

REPL

Installation

1npm install svelte-boring-avatars
2
3# or
4
5yarn add svelte-boring-avatars

Usage

1<script lang="ts">
2  import Avatar from 'svelte-boring-avatars';
3</script>
4
5<Avatar
6  size={40}
7  name="Maria Mitchell"
8  variant="marble"
9  colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
10/>

Props

Prop	Type	Default
size	number	40
square	boolean	false
variant	"bauhaus", "beam", "marble", "pixel", "ring", "sunset"	"marble"
colors	string[]	["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]

Reducing Bundle Size

This library is small as it is, but if you want to shave off some more load you can import a specific variant.

All the props stay the same except for the exclusion of variant.

1<script>
2  import { AvatarBeam } from 'svelte-boring-avatars';
3</script>
4
5<AvatarBeam
6  size={40}
7  name="Maria Mitchell"
8  colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
9/>