react-nice-avatar

Online editor / preview

• https://nice-avatar.chilllab.io/

Assets

• Designer: @Micah on Figma
• Figma files: Avatar Illustration System

Installation

npm install react-nice-avatar

or

yarn add react-nice-avatar

Usage

1. Import the component

   import Avatar, { genConfig } from 'react-nice-avatar'

2. Generate random config, the config can be saved into your database to use later

   const config = genConfig(AvatarConfig?)

3. Render the component with specific width / height and configuration

   <Avatar style={{ width: '8rem', height: '8rem' }} {...config} />

   or

   <Avatar className="w-32 h-32" {...config} />

Options

The options can be passed into genConfig or as React props

Development

1. Clone the repo:

   $ git clone [email protected]:chilllab/react-nice-avatar.git
   $ cd react-nice-avatar

2. Install dependencies:

   $ yarn

   Or

   $ npm install

3. Start the server for the demo:

   $ make dev

4. Open the browser to reivew the demo:

   $ open http://localhost:5555

5. Edit the files inside src.

License

Released under MIT by @chilllab.

Support