Main Repository – Avvvatars
Avvvatars
Beautifully crafted unique avatar placeholder for your next vue project
Lightweight and customizable ❤️
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="best_user@gmail.com" />
display-value?: string
Override default text by providing display-value
for example if you provide value=”best_user@gmail.com” 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="best_user@gmail.com" display-value="BE" />
variant?: character | shape (default character)
Use shape or character as avatar.
<Avvvatars value="best_user@gmail.com" variant="character" />
size?: number (default 32)
Override default size (32px) by providing a number.
<Avvvatars value="best_user@gmail.com" :size="32" />
shadow?: boolean (default false)
Enable shadow around the avatar.
<Avvvatars value="best_user@gmail.com" :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="best_user@gmail.com" :radius="10" />
border?: boolean (default false)
Toggle border
<Avvvatars value="best_user@gmail.com" border="false" />
border-size?: number (default 2)
Override border width
<Avvvatars value="best_user@gmail.com" border-size="2" />
border-color?: string (default #fff)
Override border color
<Avvvatars value="best_user@gmail.com" border-color="#fff" />
License
MIT
