Svelte-Boring-Avatars

A Svelte port of Boring Avatars.

Demo

REPL

Installation

npm install svelte-boring-avatars

# or

yarn add svelte-boring-avatars

Usage

<script lang="ts">
  import Avatar from 'svelte-boring-avatars';
</script>

<Avatar
  size={40}
  name="Maria Mitchell"
  variant="marble"
  colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
/>

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.

<script>
  import { AvatarBeam } from 'svelte-boring-avatars';
</script>

<AvatarBeam
  size={40}
  name="Maria Mitchell"
  colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
/>