React Notion Avatar

简体中文

• Designer: @Felix Wong on ProductHunt
• Pack of illustrations: Noto avatar

npm install react-notion-avatar

or

yarn add react-notion-avatar

1. Import the component.

   import NotionAvatar, { getRandomConfig } from 'react-notion-avatar'

2. Set the required config attribute, so that you can always rendering a same avatar with the configuration.

   const config = { eye: 3, eyebrow: 3, face: 4, glass: 1, hair: 1, mouth: 2, nose: 3, accessory: 0, beard: 0, detail: 0, }

   or generate a random config

   const config = getRandomConfig()

   tip: config is an Object, please check the Attributes below for what attributes can be passed in.

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

   <NotionAvatar style={{ width: '6rem', height: '6rem' }} config={config} />

   or

   <NotionAvatar className="className" bgColor="#debaba" shape="square" config={config} />

The Attributes can be passed into config

or as React props

1. Clone the repo:

   $ git clone git@github.com:zonemeen/react-notion-avatar.git $ cd react-notion-avatar

2. Install dependencies:

   $ yarn

   Or

   $ npm install

3. Start the server for the example:

   $ yarn start

   Or

   $ npm run start

4. Open the browser to reivew the example:

   $ open http://localhost:8080

5. Edit the files inside src.

Released under MIT by @zonemeen.