{"id":16809546,"url":"https://github.com/zonemeen/react-notion-avatar","last_synced_at":"2025-10-09T20:38:52.063Z","repository":{"id":127136858,"uuid":"418315680","full_name":"zonemeen/react-notion-avatar","owner":"zonemeen","description":"✨ React library for generating notion-style avatar","archived":false,"fork":false,"pushed_at":"2022-10-11T10:23:48.000Z","size":2415,"stargazers_count":25,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-13T04:11:00.087Z","etag":null,"topics":["avatar","avatar-generator","avatar-service","avatars","notion","react","react-library","reactjs","svg","vercel","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://react-notion-avatar.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zonemeen.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-18T02:25:18.000Z","updated_at":"2025-07-13T01:58:34.000Z","dependencies_parsed_at":"2023-07-09T18:16:35.696Z","dependency_job_id":null,"html_url":"https://github.com/zonemeen/react-notion-avatar","commit_stats":{"total_commits":122,"total_committers":3,"mean_commits":"40.666666666666664","dds":0.2704918032786885,"last_synced_commit":"ed9a6386d5261e5889f52fba860cc85427a1131d"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/zonemeen/react-notion-avatar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zonemeen%2Freact-notion-avatar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zonemeen%2Freact-notion-avatar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zonemeen%2Freact-notion-avatar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zonemeen%2Freact-notion-avatar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zonemeen","download_url":"https://codeload.github.com/zonemeen/react-notion-avatar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zonemeen%2Freact-notion-avatar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001981,"owners_count":26083259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avatar","avatar-generator","avatar-service","avatars","notion","react","react-library","reactjs","svg","vercel","vercel-deployment"],"created_at":"2024-10-13T10:13:12.316Z","updated_at":"2025-10-09T20:38:52.035Z","avatar_url":"https://github.com/zonemeen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ch1\u003eReact Notion Avatar\u003c/h1\u003e\n    \u003cimg src=\"https://cdn.jsdelivr.net/gh/miqilin21/static@master/img/example.gif\" alt=\"imagewall\" /\u003e\n\n[Read In English](./README.md)\n\n\u003c/div\u003e\n\n## 设计资源\n\n- 设计师: [@Felix Wong](https://www.producthunt.com/@felix12777) on ProductHunt\n- 素材来源: [Noto avatar](https://abstractlab.gumroad.com/l/noto-avatar)\n\n## 安装\n\n```sh\nnpm install react-notion-avatar\n```\n\nor\n\n```sh\nyarn add react-notion-avatar\n```\n\n## 使用\n\n1. 导入该组件。\n   ```js\n   import NotionAvatar, { getRandomConfig } from 'react-notion-avatar'\n   ```\n2. 必须设置 config 属性，这样你就可以固定用这个配置渲染同一个头像。\n\n   ```js\n   const config = {\n     eye: 3,\n     eyebrow: 3,\n     face: 4,\n     glass: 1,\n     hair: 1,\n     mouth: 2,\n     nose: 3,\n     accessory: 0,\n     beard: 0,\n     detail: 0,\n   }\n   ```\n\n   或随机生成 config\n\n   ```js\n   const config = getRandomConfig()\n   ```\n\n   `提示`: `config` 是一个对象，请查看下面的**属性**，了解有哪些属性可以被传入。\n\n3. 以特定的宽度/高度和配置来渲染组件。\n   ```jsx\n   \u003cNotionAvatar style={{ width: '6rem', height: '6rem' }} config={config} /\u003e\n   ```\n   or\n   ```jsx\n   \u003cNotionAvatar\n     className=\"className\"\n     bgColor=\"#debaba\"\n     shape=\"square\"\n     config={config}\n   /\u003e\n   ```\n\n## 属性\n\n以下这些属性可以被写入 `config` 中：\n\n| key         | type   | default | accept |\n| ----------- | ------ | ------- | ------ |\n| `face`      | number |         | 0~11   |\n| `eye`       | number |         | 0~14   |\n| `eyebrow`   | number |         | 0~16   |\n| `glass`     | number |         | 0~13   |\n| `hair`      | number |         | 0~58   |\n| `mouth`     | number |         | 0~20   |\n| `nose`      | number |         | 0~14   |\n| `accessory` | number | 0       | 0~13   |\n| `beard`     | number | 0       | 0~17   |\n| `detail`    | number | 0       | 0~14   |\n\n或作为 `React props` 属性传入：\n\n| key         | type   | default  | options                              | tips                 |\n| ----------- | ------ | -------- | ------------------------------------ | -------------------- |\n| `className` | string |          |                                      | Only for React Props |\n| `style`     | object |          |                                      | Only for React Props |\n| `shape`     | string | 'circle' | 'circle' , 'rounded' , 'square'      | Only for React Props |\n| `bgColor`   | string |          | Hexadecimal , RGB , HSL , Predefined | Only for React Props |\n\n## 项目开发\n\n1. 克隆项目至本地：\n   ```sh\n   $ git clone git@github.com:miqilin21/react-notion-avatar.git\n   $ cd react-notion-avatar\n   ```\n2. 安装项目依赖：\n   ```sh\n   $ yarn\n   ```\n   或\n   ```sh\n   $ npm install\n   ```\n3. 运行项目：\n   ```sh\n   $ yarn start\n   ```\n   或\n   ```sh\n   $ npm run start\n   ```\n4. 打开浏览器预览：\n   ```sh\n   $ open http://localhost:8080\n   ```\n5. 编辑 [src](/src) 里面的文件。\n\n## 许可证\n\n由[@miqilin21](https://github.com/miqilin21)发布的基于[MIT](/LICENSE)协议许可证。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzonemeen%2Freact-notion-avatar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzonemeen%2Freact-notion-avatar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzonemeen%2Freact-notion-avatar/lists"}