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: about 1 month 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 (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-09T13:57:43.000Z (5 months ago)
- Last Synced: 2024-05-01T09:43:40.087Z (4 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 will be paused by the end of this month - 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).