A Svelte port of Boring Avatars.
npm install svelte-boring-avatars
# or
yarn add svelte-boring-avatars<script lang="ts">
import Avatar from 'svelte-boring-avatars';
</script>
<Avatar
size={40}
name="Maria Mitchell"
variant="marble"
colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
/>| Prop | Type | Default |
|---|---|---|
| size | number | 40 |
| square | boolean | false |
| variant | "bauhaus", "beam", "marble", "pixel", "ring", "sunset" |
"marble" |
| colors | string[] | ["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"] |
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']}
/>