README-CN.md

React Notion Avatar

Read In English

设计资源

• 设计师: @Felix Wong on ProductHunt
• 素材来源: Noto avatar

安装

npm install react-notion-avatar

or

yarn add react-notion-avatar

使用

1. 导入该组件。

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

2. 必须设置 config 属性，这样你就可以固定用这个配置渲染同一个头像。

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

   或随机生成 config

   const config = getRandomConfig()

   提示: config 是一个对象，请查看下面的属性，了解有哪些属性可以被传入。

3. 以特定的宽度/高度和配置来渲染组件。

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

   or

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

属性

以下这些属性可以被写入 config 中：

key	type	default	accept
face	number		0~11
eye	number		0~14
eyebrow	number		0~16
glass	number		0~13
hair	number		0~58
mouth	number		0~20
nose	number		0~14
accessory	number	0	0~13
beard	number	0	0~17
detail	number	0	0~14

或作为 React props 属性传入：

key	type	default	options	tips
className	string			Only for React Props
style	object			Only for React Props
shape	string	'circle'	'circle' , 'rounded' , 'square'	Only for React Props
bgColor	string		Hexadecimal , RGB , HSL , Predefined	Only for React Props

项目开发

1. 克隆项目至本地：

   $ git clone [email protected]:miqilin21/react-notion-avatar.git
   $ cd react-notion-avatar

2. 安装项目依赖：

   $ yarn

   或

   $ npm install

3. 运行项目：

   $ yarn start

   或

   $ npm run start

4. 打开浏览器预览：

   $ open http://localhost:8080

5. 编辑 src 里面的文件。

许可证

由@miqilin21发布的基于MIT协议许可证。