https://github.com/productdevbookcom/avvvatars-vue

Beautifully crafted unique avatar placeholder for your next vue project
https://github.com/productdevbookcom/avvvatars-vue

avatar avatar-generator avatar-placeholder placeholder-avatars profile-picture vuejs

Last synced: about 1 month ago
JSON representation

Beautifully crafted unique avatar placeholder for your next vue project

• Host: GitHub
• URL: https://github.com/productdevbookcom/avvvatars-vue
• Owner: productdevbookcom
• License: mit
• Created: 2023-04-21T13:24:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-27T20:01:06.000Z (7 months ago)
• Last Synced: 2024-05-28T05:38:03.114Z (7 months ago)
• Topics: avatar, avatar-generator, avatar-placeholder, placeholder-avatars, profile-picture, vuejs
• Language: TypeScript
• Homepage: https://avvvatars.com
• Size: 3.68 MB
• Stars: 27
• Watchers: 1
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
![@productdevbook/avvvatars](./.github/assets/Cover.png)

[![npm version](https://badge.fury.io/js/avvvatars-vue.svg)](https://badge.fury.io/js/avvvatars-vue)

[![npm](https://img.shields.io/npm/dt/avvvatars-vue.svg)](https://www.npmjs.com/package/avvvatars-vue)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/avvvatars-vue.svg)](https://bundlephobia.com/result?p=avvvatars-vue)

![npm](https://img.shields.io/npm/l/avvvatars-vue.svg)

Main Repository - [Avvvatars](https://github.com/nusu/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 🧩](https://avvvatars-demo-nusualabuga.vercel.app/) | [Website 🧘‍♀️](https://avvvatars.com)

Built by [Nusu Alabuga](https://twitter.com/nusualabuga) and [Oguz Yagiz Kara](https://twitter.com/oguzyagizkara)

Vue3 Converted by [Fatih Yildiz](https://twitter.com/0fatihyildiz)

🙏 Special thanks to [Monika Michalczyk](https://www.monikamichalczyk.com/) for awesome shapes 🙏

## Installation

**With pnpm**

```js

pnpm i avvvatars-vue

```

**With yarn**

```js

yarn add avvvatars-vue

```

**With npm**

```js

npm install avvvatars-vue

```

## Getting Started

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

```jsx

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.

```jsx

```

### `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**

```jsx

```

### `variant?: character | shape  (default character)`

Use shape or character as avatar.

```jsx

```

### `size?: number  (default 32)`

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

```jsx

```

### `shadow?: boolean  (default false)`

Enable shadow around the avatar.

```jsx

```

### `radius?: number` (default [size](https://github.com/nusu/avvvatars#size-number--default-32))

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

```jsx

```

### `border?: boolean  (default false)`

Toggle border

```jsx

```

### `border-size?: number  (default 2)`

Override border width

```jsx

```

### `border-color?: string  (default #fff)`

Override border color

```jsx

```

## Sponsors



  

    

  



## License

MIT