{"id":13469720,"url":"https://github.com/fangpenlin/avataaars","last_synced_at":"2025-05-15T10:00:39.279Z","repository":{"id":27265906,"uuid":"112935877","full_name":"fangpenlin/avataaars","owner":"fangpenlin","description":"React component for avataaars","archived":false,"fork":false,"pushed_at":"2024-03-04T23:26:20.000Z","size":548,"stargazers_count":810,"open_issues_count":30,"forks_count":181,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-30T13:35:16.384Z","etag":null,"topics":["avatar","component","design-tools","react"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fangpenlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-03T14:43:14.000Z","updated_at":"2025-04-05T04:45:00.000Z","dependencies_parsed_at":"2024-06-18T12:40:29.561Z","dependency_job_id":"856da4d6-c654-4108-9bcb-a38648d0d56d","html_url":"https://github.com/fangpenlin/avataaars","commit_stats":{"total_commits":70,"total_committers":10,"mean_commits":7.0,"dds":0.4714285714285714,"last_synced_commit":"93aa902c729b1a9eaf2b5917c6d1ebe9de32af75"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fangpenlin%2Favataaars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fangpenlin%2Favataaars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fangpenlin%2Favataaars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fangpenlin%2Favataaars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fangpenlin","download_url":"https://codeload.github.com/fangpenlin/avataaars/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253065386,"owners_count":21848246,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avatar","component","design-tools","react"],"created_at":"2024-07-31T15:01:52.730Z","updated_at":"2025-05-15T10:00:38.260Z","avatar_url":"https://github.com/fangpenlin.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React component for Avataaars\n\nThe core React component for [Avataaars Generator](https://getavataaars.com/) developed by [Fang-Pen Lin](https://twitter.com/fangpenlin), based on the Sketch library [Avataaars](https://avataaars.com/) designed by [Pablo Stanley](https://twitter.com/pablostanley). \n\n\u003cp align=\"center\"\u003e\u003cimg src='avataaars-example.png?raw=true' style='width: 300px; height: 300px;' /\u003e\u003c/p\u003e\n\n## Features\n\n - SVG based\n - Light weight \n - Scalable\n - Easy to use\n - Easy to integrate with custom editor\n - Comes with [official editor](https://getavataaars.com/)\n\n## Usage\n\nFirst, you need to install the avataaars component package, here you run\n\n```\nyarn add avataaars\n```\n\nor\n\n```\nnpm install avataaars --save\n```\n\nif you are using npm. Then, in your React app, import the Avataaar component and put it where you like it to be, for example\n\n```jsx\nimport * as React from 'react'\nimport Avatar from 'avataaars'\n\nexport default class MyComponent extends React.Component {\n  render () {\n    return \n      \u003cdiv\u003e\n        Your avatar:\n        \u003cAvatar\n          style={{width: '100px', height: '100px'}}\n          avatarStyle='Circle'\n          topType='LongHairMiaWallace'\n          accessoriesType='Prescription02'\n          hairColor='BrownDark'\n          facialHairType='Blank'\n          clotheType='Hoodie'\n          clotheColor='PastelBlue'\n          eyeType='Happy'\n          eyebrowType='Default'\n          mouthType='Smile'\n          skinColor='Light'\n        /\u003e\n      \u003c/div\u003e\n  }\n}\n```\n\nTo showcase individual pieces of the avatar you can use the Piece component, for example:\n\n```jsx\nimport * as React from 'react'\nimport {Piece} from 'avataaars';\n\nexport default class MyComponent extends React.Component {\n  render () {\n    return \n      \u003cdiv\u003e\n        \u003cPiece pieceType=\"mouth\" pieceSize=\"100\" mouthType=\"Eating\"/\u003e\n        \u003cPiece pieceType=\"eyes\" pieceSize=\"100\" eyeType=\"Dizzy\"/\u003e\n        \u003cPiece pieceType=\"eyebrows\" pieceSize=\"100\" eyebrowType=\"RaisedExcited\"/\u003e\n        \u003cPiece pieceType=\"accessories\" pieceSize=\"100\" accessoriesType=\"Round\"/\u003e\n        \u003cPiece pieceType=\"top\" pieceSize=\"100\" topType=\"LongHairFro\" hairColor=\"Red\"/\u003e\n        \u003cPiece pieceType=\"facialHair\" pieceSize=\"100\" facialHairType=\"BeardMajestic\"/\u003e\n        \u003cPiece pieceType=\"clothe\" pieceSize=\"100\" clotheType=\"Hoodie\" clotheColor=\"Red\"/\u003e\n        \u003cPiece pieceType=\"graphics\" pieceSize=\"100\" graphicType=\"Skull\" /\u003e\n        \u003cPiece pieceType=\"skin\" pieceSize=\"100\" skinColor=\"Brown\" /\u003e\n      \u003c/div\u003e\n  }\n}\n```\n\nTo explore avatar options and generate the React code, please use [Avataaars Generator](https://getavataaars.com/)\n\n## Collect options\n\nTo build your own avatar editor, you may want to use lower level `Avatar` component along with `OptionContext`. For more details usage, please reference to source code of [avataaars-generator](https://github.com/fangpenlin/avataaars-geneator), see how it uses `OptionContext` to collection available options.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffangpenlin%2Favataaars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffangpenlin%2Favataaars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffangpenlin%2Favataaars/lists"}