https://github.com/fangpenlin/avataaars

React component for avataaars
https://github.com/fangpenlin/avataaars

avatar component design-tools react

Last synced: about 2 months ago
JSON representation

React component for avataaars

• Host: GitHub
• URL: https://github.com/fangpenlin/avataaars
• Owner: fangpenlin
• License: mit
• Created: 2017-12-03T14:43:14.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-04T23:26:20.000Z (7 months ago)
• Last Synced: 2024-05-22T03:03:24.888Z (4 months ago)
• Topics: avatar, component, design-tools, react
• Language: TypeScript
• Size: 535 KB
• Stars: 762
• Watchers: 15
• Forks: 161
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React component for Avataaars

The 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). 



## Features

 - SVG based

 - Light weight 

 - Scalable

 - Easy to use

 - Easy to integrate with custom editor

 - Comes with [official editor](https://getavataaars.com/)

## Usage

First, you need to install the avataaars component package, here you run

```

yarn add avataaars

```

or

```

npm install avataaars --save

```

if you are using npm. Then, in your React app, import the Avataaar component and put it where you like it to be, for example

```jsx

import * as React from 'react'

import Avatar from 'avataaars'

export default class MyComponent extends React.Component {

  render () {

    return 

      


        Your avatar:

        

      

  }

}

```


To showcase individual pieces of the avatar you can use the Piece component, for example:

```jsx

import * as React from 'react'

import {Piece} from 'avataaars';

export default class MyComponent extends React.Component {

  render () {

    return 

      


        

        

        

        

        

        

        

        

        

      

  }

}

```


To explore avatar options and generate the React code, please use [Avataaars Generator](https://getavataaars.com/)

## Collect options

To 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.