Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ademilter/vue-nice-avatar
https://github.com/ademilter/vue-nice-avatar
avatar-generator vue
Last synced: 19 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/ademilter/vue-nice-avatar
- Owner: ademilter
- Created: 2021-06-10T09:31:04.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-25T22:30:52.000Z (about 1 year ago)
- Last Synced: 2024-10-15T02:27:45.170Z (about 1 month ago)
- Topics: avatar-generator, vue
- Language: Vue
- Homepage: https://vue-nice-avatar.vercel.app
- Size: 234 KB
- Stars: 104
- Watchers: 3
- Forks: 16
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-nice-avatar
[](https://www.npmjs.org/package/vue-nice-avatar)
[![npm download][download-image]][download-url]
[download-image]: https://img.shields.io/npm/dm/vue-nice-avatar.svg?style=flat-square
[download-url]: https://npmjs.org/package/vue-nice-avatar
## Online editor / preview
- https://vue-nice-avatar.vercel.app/
## Assets
- Designer / Figma files: [Avatar Illustration System](https://www.figma.com/community/file/829741575478342595)
## Installation
```sh
yarn add vue-nice-avatar
```
## Usage
1. Import the component
```js
import NiceAvatar from "vue-nice-avatar";
```
2. Render the component with props
```jsx
```
## Options
The options can be passed into genConfig or as React props
| key | type | default | accept |
| ------------ | ---------------- | ------- | --------------------------------------------------------------------------- |
| `size` | string or number | 120 | |
| `bgColor` | string | random | |
| `faceColor` | string | random | |
| `eye` | string | random | circle, oval, smile, shadow |
| `eyeBrow` | string | random | none, eyebrows-up, eyebrows-down, eyelashes-down, eyelashes-up |
| `ear` | string | random | small, big |
| `earring` | string | random | none, stud, hoop |
| `mouth` | string | random | frown, laughing, nervous, pucker, sad, smile, smirk, suprised |
| `hair` | string | random | none, danny-phantom, doug-funny, fonza, full, mr-clean, mr-t, pixie, turban |
| `hairColor` | string | random | |
| `nose` | string | random | curve, pointed, round |
| `glasses` | string | random | none, round, square |
| `beard` | string | random | none, hipster, scruff |
| `beardColor` | string | random | |
| `shirt` | string | random | collared, crew, open |
| `shirtColor` | string | random | |
## Development
1. Clone the repo
```sh
git clone [email protected]:ademilter/vue-nice-avatar.git
```
2. Clone the repo
```sh
cd vue-nice-avatar
```
3. Install dependencies
```sh
yarn
```
4. Start the server for the demo
```sh
yarn dev
```
5. Open the browser to reivew the demo
```sh
open http://localhost:3000
```
6. Edit the files inside `src/components/NiceAvatar`.
## License
Released under [MIT](/LICENSE) by [@ademilter](https://github.com/ademilter).