Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/boringdesigners/boring-avatars
Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette.
https://github.com/boringdesigners/boring-avatars
avatar avatar-component avatar-generator avatar-placeholder avatar-service avatars-constructor beautiful-avatars javascript random-avatars react svg
Last synced: 4 months ago
JSON representation
Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette.
- Host: GitHub
- URL: https://github.com/boringdesigners/boring-avatars
- Owner: boringdesigners
- License: mit
- Created: 2020-12-23T13:47:36.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-09T13:57:43.000Z (10 months ago)
- Last Synced: 2024-05-01T09:43:40.087Z (10 months ago)
- Topics: avatar, avatar-component, avatar-generator, avatar-placeholder, avatar-service, avatars-constructor, beautiful-avatars, javascript, random-avatars, react, svg
- Language: JavaScript
- Homepage: https://boringavatars.com
- Size: 2.84 MB
- Stars: 5,415
- Watchers: 23
- Forks: 183
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - boringdesigners/boring-avatars - Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette. (JavaScript)
- awesome - boringdesigners/boring-avatars - Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette. (JavaScript)
- awesome-github-star - boring-avatars - based avatars from any username and color palette. | boringdesigners | 5059 | (JavaScript)
- awesome-repos - boring-avatars
README
# Boring avatars
Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette.
## Install
```
npm install boring-avatars
```
## Usage
```jsx
import Avatar from 'boring-avatars';
;
```
### Props
| Prop | Type | Default |
|---------|--------------------------------------------------------------|-----------------------------------------------------------|
| size | number or string | `40px` |
| square | boolean | `false` |
| title | boolean | `false` |
| name | string | `Clara Barton` |
| variant | oneOf: `marble`, `beam`, `pixel`,`sunset`, `ring`, `bauhaus` | `marble` |
| colors | array | `['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']` |
#### Name
The `name` prop is used to generate the avatar. It can be the username, email or any random string.
```jsx
```
#### Variant
The `variant` prop is used to change the theme of the avatar. The available variants are: `marble`, `beam`, `pixel`, `sunset`, `ring` and `bauhaus`.
```jsx
```
#### Size
The `size` prop is used to change the size of the avatar.
```jsx
```
#### Colors
The `colors` prop is used to change the color palette of the avatar.
```jsx
```
#### Square
The `square` prop is used to make the avatar square.
```jsx
```
## API service
> [!IMPORTANT]
> Please note that the old service was paused in July 31st 2024. We recommend transitioning to our new API service to ensure uninterrupted access and support.
Get access to the Boring avatars API service [here →](https://boringdesigners.gumroad.com/l/boring-avatars-service).