1.2.6 • Published 1 year ago
@fablehenge/svelte-boring-avatars v1.2.6
Svelte-Boring-Avatars
NOTE >
@fablehenge/svelte-boring-avatars
is a fork of svelte-boring-avatars. Contains one fix to make typescript work with sveltkit-v2. Credit to this PR: https://github.com/paolotiu/svelte-boring-avatars/pull/6Readme below here is from the upstream project.
A Svelte port of Boring Avatars.
Demo
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"]}
/>
1.2.6
1 year ago