Appearance

Return to top
On this page

How to use the library with Svelte? ​

It is quite easy to use the JS-Library in Svelte. We convert the SVG to a data URI and use it as the src.

svelte
<script>
  import { createAvatar } from "@dicebear/core";
  import { lorelei } from "@dicebear/collection";

  let avatar = createAvatar(lorelei, {
    size: 128,
    // ... other options
  }).toDataUriSync();
</script>

<img src={avatar} alt="Avatar" />
Adventurer by Lisa Wischofsky / CC BY 4.0. Avataaars by Pablo Stanley / Free for personal and commercial use. Face Generator by The Visual Team / CC BY 4.0. Custom Avatar by Ashley Seo / CC BY 4.0. Bottts by Pablo Stanley / Free for personal and commercial use. Croodles - Doodle your face by vijay verma / CC BY 4.0. Fun Emoji Set by Davis Uche / CC BY 4.0. Bootstrap Icons by The Bootstrap Authors / MIT. Lorelei by Lisa Wischofsky / CC0 1.0. Avatar Illustration System by Micah Lanier / CC BY 4.0. Miniavs - Free Avatar Creator by Webpixels / CC BY 4.0. Notionists by Zoish / CC0 1.0. Open Peeps by Pablo Stanley / CC0 1.0. Personas by Draftbit by Draftbit - draftbit.com / CC BY 4.0. - All avatars are remixes of the original works.