Main Repository - Avvvatars

Avvvatars

Beautifully crafted unique avatar placeholder for your next vue project

Lightweight and customizable ❤️

https://user-images.githubusercontent.com/1702215/158075475-c23004ab-827a-45ad-bdba-aee29ac5b582.mp4

Live Demo 🧩 | Website 🧘‍♀️

Built by Nusu Alabuga and Oguz Yagiz Kara

Vue3 Converted by Fatih Yildiz

🙏 Special thanks to Monika Michalczyk for awesome shapes 🙏

Installation

With pnpm

pnpm i avvvatars-vue

With yarn

yarn add avvvatars-vue

With npm

npm install avvvatars-vue

Getting Started

Import Avvvatars to your app, then use it anywhere you want.

import { Avvvatars } from 'avvvatars-vue'
import 'avvvatars-vue/style'

Customization

value: string

This is required for plugin to work, each value generates a random avatar to unique to this value, so each time plugin renders, you will get the same results.

<Avvvatars value="[email protected]" />

display-value?: string

Override default text by providing display-value

for example if you provide value=”[email protected]” the character output will be the first 2 letters of value which is “BE”, if you pass displayValue=”BU” you can override it to BU

<Avvvatars value="[email protected]" display-value="BE" />

variant?: character | shape (default character)

Use shape or character as avatar.

<Avvvatars value="[email protected]" variant="character" />

size?: number (default 32)

Override default size (32px) by providing a number.

<Avvvatars value="[email protected]" :size="32" />

shadow?: boolean (default false)

Enable shadow around the avatar.

<Avvvatars value="[email protected]" :shadow="false" />

radius?: number (default size)

Override the radius of the avatar, it takes size by default to always turn it to a circle

<Avvvatars value="[email protected]" :radius="10" />

border?: boolean (default false)

Toggle border

<Avvvatars value="[email protected]" border="false" />

border-size?: number (default 2)

Override border width

<Avvvatars value="[email protected]" border-size="2" />

border-color?: string (default #fff)

Override border color

<Avvvatars value="[email protected]" border-color="#fff" />

Sponsors

License

MIT