vue-notion-avatar

Assets

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

Installation

npm install vue-notion-avatar

or

yarn add vue-notion-avatar

Usage

1. Import the component.

   import NotionAvatar, { getRandomConfig } from 'vue-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 like:

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

   or

   <template>
     <NotionAvatar
       class="main"
       bgColor="#debaba"
       shape="square"
       config={config}
     />
   </template>
   

Attributes

The Attributes can be passed into config

or as React props

Development

1. Clone the repo:

   $ git clone [email protected]:zonemeen/vue-notion-avatar.git
   $ cd vue-notion-avatar
   

2. Install dependencies:

   $ yarn
   

   Or

   $ npm install
   

3. Start the server for the example:

   $ yarn dev
   

   Or

   $ npm run dev
   

4. Open the browser to reivew the example:

   $ open http://localhost:3000
   

5. Edit the files inside src.

License

Released under MIT by @zonemeen.