Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nusu/avvvatars
Beautifully crafted unique avatar placeholder for your next react project
https://github.com/nusu/avvvatars
avatar avatar-generator avatar-placeholder placeholder-avatars profile-picture react
Last synced: 24 days ago
JSON representation
Beautifully crafted unique avatar placeholder for your next react project
- Host: GitHub
- URL: https://github.com/nusu/avvvatars
- Owner: nusu
- License: mit
- Created: 2022-03-13T14:01:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-08T23:46:44.000Z (4 months ago)
- Last Synced: 2024-10-01T22:06:26.239Z (about 1 month ago)
- Topics: avatar, avatar-generator, avatar-placeholder, placeholder-avatars, profile-picture, react
- Language: TypeScript
- Homepage: https://avvvatars.com
- Size: 1.82 MB
- Stars: 1,817
- Watchers: 2
- Forks: 80
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - avvvatars
- awesome-web-cn - avvvatars - 一个用于 React 项目中的漂亮、独特的头像占位符，利用输入的字符串来生成独特的头像 (Uncategorized / Uncategorized)
README
# Avvvatars
Beautifully crafted unique avatar placeholder for your next react 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)
🙏 Special thanks to [Monika Michalczyk](https://www.monikamichalczyk.com/) for awesome shapes 🙏
## Features
- 🌈 **40 Colors** - Colors are so on point that most of the projects can use it without changing it
- 💠 **60 Shapes** - Beautifully crafted shapes that are unique to your user with color combination
- 🆎 **Text or Shapes** 🔸 - Use letters (eg. JD for John Doe) or unique shapes
- 🤠 **Unique to user** - Generated avatars are unique to the string that you provide, it means if you pass [email protected] you will always get the same avatar
- 🕊 **Lightweight** - less than 20kb compressed + gzipped
- ✍️ **Customizable** - use shadows, change size, provide alternative text to display
## Installation
**With yarn**
```jsx
yarn add avvvatars-react
```
**With npm**
```jsx
npm install avvvatars-react
```
## Getting Started
Import Avvvatars to your app, then use it anywhere you want.
```jsx
import Avvvatars from 'avvvatars-react'
export default function MyAvatar() {
return (
)
}
```
## 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
```
### `displayValue?: string`
Override default text by providing displayValue
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
```
### `style?: 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
```
### `borderSize?: number (default 2)`
Override border width
```jsx
```
### `borderColor?: string (default #fff)`
Override border color
```jsx
```
## Figma
If you want to access design files to change something or customize it to your own, use our [Figma File](https://www.figma.com/community/file/1084861895116393858/Avvvatars.com---Open-Source-React-UI-Avatar-Library-(Community))
## License
MIT