https://github.com/maidi29/custom-avatar-generator
Angular Element (Web Component) that creates a random avatar svg image and lets the user customize it.
https://github.com/maidi29/custom-avatar-generator
angular angular-elements avataaars avataaars-generator avatar avatar-generator web-components
Last synced: 5 months ago
JSON representation
Angular Element (Web Component) that creates a random avatar svg image and lets the user customize it.
- Host: GitHub
- URL: https://github.com/maidi29/custom-avatar-generator
- Owner: maidi29
- Created: 2021-04-05T00:07:58.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-27T21:33:13.000Z (over 3 years ago)
- Last Synced: 2025-10-24T16:29:01.055Z (8 months ago)
- Topics: angular, angular-elements, avataaars, avataaars-generator, avatar, avatar-generator, web-components
- Language: TypeScript
- Homepage: https://htmlpreview.github.io/?https://github.com/maidi29/custom-avatar-generator/demo/demo/index.html
- Size: 369 KB
- Stars: 12
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# custom-avatar-generator
[](https://www.npmjs.com/package/custom-avatar-generator)
Angular Element (Web Component) that creates a random avatar svg image and lets the user customize it with endless possible combinations.
If you would like to use this generator as Angular Module inside your Angular Application, checkout this package:
https://www.npmjs.com/package/ng-custom-avatar-generator
## Demo
Use the generator and see how it will look like at your page or application:
👾[**Demo inside a real application**](https://www.gifit2me.com)👾 [(Code)](https://github.com/maidi29/gifit2me)
⚡[**Demo without Face Details**](https://htmlpreview.github.io/?https://github.com/maidi29/custom-avatar-generator/demo/demo/index.html)⚡ (enable-face is false)
✨[**Demo with Face Details**](https://htmlpreview.github.io/?https://github.com/maidi29/custom-avatar-generator/demo/demo/demo-with-face.html)✨ (enable-face is true)
See the code and play with the attributes:
👩💻 [JSFiddle](https://jsfiddle.net/maidi/L4so8gyj/)👩💻
## Screenshots & Images
### User Interface
### Resulting Avatars examples
## Usage
Integrate the package script:
````html
````
Add the Angular Element with optional attributes to adapt the avatar generator.
````html
{
const mySvgUrl = event.detail;
console.log(mySvgUrl);
// do whatever you want here
});
````
## Attributes
All input attributes are optional and have a default. Possible inputs are:
| name | possible values | default | description |
| ------------- |------------- | ---- | ----- |
| `shape` | 'sqaure' or 'round' | 'round' | shape of the avatar image |
| `enable-background`| 'true' or 'false' | 'false' | Displays a colored background behind the avatar and lets the user customize the color |
| `enable-face` | 'true' or 'false' | 'false' | Displays eyebrows, eyes, nose, mouth, facial hair and glasses and lets the user customize the color and type |
| `display-download` | 'true' or 'false' | 'false' | Displays a download button below the controls so the user can save the svg file on their device |
| `texts` | JSON with all displayed text string. Structure below| see JSON below | Modify the display texts of the controls |
```json
{
"everything": "EVERYTHING",
"allColors": "All colors",
"background": "Background", // optional
"skin": "Skin",
"hair": "Hair",
"hairStyle": "Hair Style",
"accessory": "Accessory",
"clothes": "Clothes",
"clothing": "Clothing",
"print": "Print",
"eyebrows": "Eyebrows", // optional
"eyes": "Eyes", // optional
"nose": "Nose", // optional
"mouth": "Mouth", // optional
"facialHair": "FacialHair", // optional
"glasses": "Glasses" // optional
}
```
Keep attention that you integrate every property when using the `texts` attribute because it completely overwrites the default texts object.
## Info
Based on https://avataaars.com/