├── .github └── workflows │ └── release.yml ├── .gitignore ├── .npmignore ├── .prettierrc ├── LICENSE ├── README-CN.md ├── README.md ├── build.config.ts ├── package.json ├── pnpm-lock.yaml ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.tsx ├── components │ ├── AvatarEditor │ │ ├── SectionWrapper │ │ │ ├── index.scss │ │ │ └── index.tsx │ │ ├── index.scss │ │ └── index.tsx │ ├── Footer │ │ └── index.tsx │ └── Header │ │ ├── index.scss │ │ └── index.tsx ├── i18n.ts ├── index.scss ├── index.tsx ├── package │ ├── accessory │ │ ├── 0.tsx │ │ ├── 1.tsx │ │ ├── 10.tsx │ │ ├── 11.tsx │ │ ├── 12.tsx │ │ ├── 2.tsx │ │ ├── 3.tsx │ │ ├── 4.tsx │ │ ├── 5.tsx │ │ ├── 6.tsx │ │ ├── 7.tsx │ │ ├── 8.tsx │ │ ├── 9.tsx │ │ └── index.tsx │ ├── beard │ │ ├── 0.tsx │ │ ├── 1.tsx │ │ ├── 10.tsx │ │ ├── 11.tsx │ │ ├── 12.tsx │ │ ├── 13.tsx │ │ ├── 14.tsx │ │ ├── 15.tsx │ │ ├── 16.tsx │ │ ├── 2.tsx │ │ ├── 3.tsx │ │ ├── 4.tsx │ │ ├── 5.tsx │ │ ├── 6.tsx │ │ ├── 7.tsx │ │ ├── 8.tsx │ │ ├── 9.tsx │ │ └── index.tsx │ ├── const.ts │ ├── detail │ │ ├── 0.tsx │ │ ├── 1.tsx │ │ ├── 10.tsx │ │ ├── 11.tsx │ │ ├── 12.tsx │ │ ├── 13.tsx │ │ ├── 2.tsx │ │ ├── 3.tsx │ │ ├── 4.tsx │ │ ├── 5.tsx │ │ ├── 6.tsx │ │ ├── 7.tsx │ │ ├── 8.tsx │ │ ├── 9.tsx │ │ └── index.tsx │ ├── eye │ │ ├── 0.tsx │ │ ├── 1.tsx │ │ ├── 10.tsx │ │ ├── 11.tsx │ │ ├── 12.tsx │ │ ├── 13.tsx │ │ ├── 2.tsx │ │ ├── 3.tsx │ │ ├── 4.tsx │ │ ├── 5.tsx │ │ ├── 6.tsx │ │ ├── 7.tsx │ │ ├── 8.tsx │ │ ├── 9.tsx │ │ └── index.tsx │ ├── eyebrow │ │ ├── 0.tsx │ │ ├── 1.tsx │ │ ├── 10.tsx │ │ ├── 11.tsx │ │ ├── 12.tsx │ │ ├── 13.tsx │ │ ├── 14.tsx │ │ ├── 15.tsx │ │ ├── 2.tsx │ │ ├── 3.tsx │ │ ├── 4.tsx │ │ ├── 5.tsx │ │ ├── 6.tsx │ │ ├── 7.tsx │ │ ├── 8.tsx │ │ ├── 9.tsx │ │ └── index.tsx │ ├── face │ │ ├── 0.tsx │ │ ├── 1.tsx │ │ ├── 10.tsx │ │ ├── 2.tsx │ │ ├── 3.tsx │ │ ├── 4.tsx │ │ ├── 5.tsx │ │ ├── 6.tsx │ │ ├── 7.tsx │ │ ├── 8.tsx │ │ ├── 9.tsx │ │ └── index.tsx │ ├── glass │ │ ├── 0.tsx │ │ ├── 1.tsx │ │ ├── 10.tsx │ │ ├── 11.tsx │ │ ├── 12.tsx │ │ ├── 2.tsx │ │ ├── 3.tsx │ │ ├── 4.tsx │ │ ├── 5.tsx │ │ ├── 6.tsx │ │ ├── 7.tsx │ │ ├── 8.tsx │ │ ├── 9.tsx │ │ └── index.tsx │ ├── hair │ │ ├── 0.tsx │ │ ├── 1.tsx │ │ ├── 10.tsx │ │ ├── 11.tsx │ │ ├── 12.tsx │ │ ├── 13.tsx │ │ ├── 14.tsx │ │ ├── 15.tsx │ │ ├── 16.tsx │ │ ├── 17.tsx │ │ ├── 18.tsx │ │ ├── 19.tsx │ │ ├── 2.tsx │ │ ├── 20.tsx │ │ ├── 21.tsx │ │ ├── 22.tsx │ │ ├── 23.tsx │ │ ├── 24.tsx │ │ ├── 25.tsx │ │ ├── 26.tsx │ │ ├── 27.tsx │ │ ├── 28.tsx │ │ ├── 29.tsx │ │ ├── 3.tsx │ │ ├── 30.tsx │ │ ├── 31.tsx │ │ ├── 32.tsx │ │ ├── 33.tsx │ │ ├── 34.tsx │ │ ├── 35.tsx │ │ ├── 36.tsx │ │ ├── 37.tsx │ │ ├── 38.tsx │ │ ├── 39.tsx │ │ ├── 4.tsx │ │ ├── 40.tsx │ │ ├── 41.tsx │ │ ├── 42.tsx │ │ ├── 43.tsx │ │ ├── 44.tsx │ │ ├── 45.tsx │ │ ├── 46.tsx │ │ ├── 47.tsx │ │ ├── 48.tsx │ │ ├── 49.tsx │ │ ├── 5.tsx │ │ ├── 50.tsx │ │ ├── 51.tsx │ │ ├── 52.tsx │ │ ├── 53.tsx │ │ ├── 54.tsx │ │ ├── 55.tsx │ │ ├── 56.tsx │ │ ├── 57.tsx │ │ ├── 6.tsx │ │ ├── 7.tsx │ │ ├── 8.tsx │ │ ├── 9.tsx │ │ └── index.tsx │ ├── index.tsx │ ├── mouth │ │ ├── 0.tsx │ │ ├── 1.tsx │ │ ├── 10.tsx │ │ ├── 11.tsx │ │ ├── 12.tsx │ │ ├── 13.tsx │ │ ├── 14.tsx │ │ ├── 15.tsx │ │ ├── 16.tsx │ │ ├── 17.tsx │ │ ├── 18.tsx │ │ ├── 19.tsx │ │ ├── 2.tsx │ │ ├── 3.tsx │ │ ├── 4.tsx │ │ ├── 5.tsx │ │ ├── 6.tsx │ │ ├── 7.tsx │ │ ├── 8.tsx │ │ ├── 9.tsx │ │ └── index.tsx │ ├── nose │ │ ├── 0.tsx │ │ ├── 1.tsx │ │ ├── 10.tsx │ │ ├── 11.tsx │ │ ├── 12.tsx │ │ ├── 13.tsx │ │ ├── 2.tsx │ │ ├── 3.tsx │ │ ├── 4.tsx │ │ ├── 5.tsx │ │ ├── 6.tsx │ │ ├── 7.tsx │ │ ├── 8.tsx │ │ ├── 9.tsx │ │ └── index.tsx │ ├── types.ts │ └── utils.ts ├── scss │ ├── _fonts.scss │ ├── _iconfont.scss │ ├── _mixin.scss │ └── fonts │ │ └── SFRounded-bold.woff ├── translations.ts └── utils │ └── copy.ts ├── tailwind.config.js └── tsconfig.json /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release npmjs package and generate github changelog 2 | 3 | on: 4 | push: 5 | tags: 6 | - 'v*' 7 | 8 | jobs: 9 | build: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v3 13 | with: 14 | fetch-depth: 0 15 | 16 | - uses: actions/setup-node@v3 17 | with: 18 | node-version: '16.x' 19 | registry-url: 'https://registry.npmjs.org' 20 | 21 | - env: 22 | GITHUB_TOKEN: ${{secrets.GIT_HUB_TOKEN}} 23 | run: npx changelogithub 24 | 25 | - run: npm i -g pnpm 26 | 27 | - run: pnpm i 28 | 29 | - run: pnpm build:notion 30 | 31 | - env: 32 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 33 | run: npm publish 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Bower dependency directory (https://bower.io/) 24 | bower_components 25 | 26 | # node-waf configuration 27 | .lock-wscript 28 | 29 | # Compiled binary addons (https://nodejs.org/api/addons.html) 30 | build/Release 31 | 32 | # Dependency directories 33 | node_modules/ 34 | jspm_packages/ 35 | 36 | # TypeScript v1 declaration files 37 | typings/ 38 | 39 | # Optional npm cache directory 40 | .npm 41 | 42 | # Optional eslint cache 43 | .eslintcache 44 | 45 | # Optional REPL history 46 | .node_repl_history 47 | 48 | # Output of 'npm pack' 49 | *.tgz 50 | 51 | # Yarn Integrity file 52 | .yarn-integrity 53 | 54 | # dotenv environment variables file 55 | .env 56 | 57 | # next.js build output 58 | .next 59 | 60 | # Lib 61 | 62 | lib/ 63 | 64 | .idea 65 | 66 | .idea/ 67 | 68 | dist/ 69 | 70 | build/ 71 | 72 | notion-dist/ 73 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | // system file 2 | *.log 3 | .DS_Store* 4 | .idea/ 5 | 6 | // specific files 7 | node_modules/ 8 | test/ 9 | src/ 10 | build/ 11 | example/ 12 | scripts/ 13 | 14 | // setting files 15 | .babelrc 16 | .travis.yml 17 | .eslintrc 18 | .eslintignore 19 | .prettierrc 20 | .gitignore 21 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "javascript.format.insertSpaceBeforeFunctionParenthesis": true, 5 | "eslintIntegration": true, 6 | "htmlWhitespaceSensitivity": "ignore", 7 | "endOfLine": "auto" 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 灵谦 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /build.config.ts: -------------------------------------------------------------------------------- 1 | import { defineBuildConfig } from 'unbuild' 2 | 3 | export default defineBuildConfig({ 4 | entries: ['src/package/index'], 5 | outDir: './notion-dist', 6 | declaration: true, 7 | clean: true, 8 | rollup: { 9 | emitCJS: true, 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zonemeen/react-notion-avatar/ed9a6386d5261e5889f52fba860cc85427a1131d/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zonemeen/react-notion-avatar/ed9a6386d5261e5889f52fba860cc85427a1131d/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zonemeen/react-notion-avatar/ed9a6386d5261e5889f52fba860cc85427a1131d/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/AvatarEditor/SectionWrapper/index.scss: -------------------------------------------------------------------------------- 1 | @keyframes jelly { 2 | 0%, 3 | 100% { 4 | transform: scale(1, 1); 5 | } 6 | 25% { 7 | transform: scale(0.9, 1.1); 8 | } 9 | 50% { 10 | transform: scale(1.1, 0.9); 11 | } 12 | 75% { 13 | transform: scale(0.95, 1.05); 14 | } 15 | } 16 | 17 | .SectionWrapper { 18 | cursor: pointer; 19 | background: rgba(255, 255, 255, 1); 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | position: relative; 24 | &:hover { 25 | animation: jelly 0.5s; 26 | &:after { 27 | opacity: 1; 28 | transform: translateY(0px); 29 | } 30 | } 31 | &:after { 32 | content: attr(data-tip); 33 | position: absolute; 34 | bottom: 120%; 35 | border-radius: 5px; 36 | font-size: 0.75rem; 37 | color: #fff; 38 | background: rgba(255, 255, 255, 0.15); 39 | padding: 0.15rem 0.75rem; 40 | opacity: 0; 41 | transform: translateY(10px); 42 | transition: all 0.2s ease-out; 43 | } 44 | 45 | .childrenWrapper > svg { 46 | top: auto !important; 47 | right: auto !important; 48 | bottom: auto !important; 49 | left: auto !important; 50 | width: 100% !important; 51 | height: 100% !important; 52 | } 53 | } -------------------------------------------------------------------------------- /src/components/AvatarEditor/SectionWrapper/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import './index.scss' 4 | interface SectionProps { 5 | className?: string 6 | children: JSX.Element 7 | switchConfig?: () => void 8 | tip: string 9 | isSvgElement?: boolean 10 | } 11 | const sectionWrapper: React.FC = (props) => { 12 | const { className = '', children, switchConfig, tip, isSvgElement } = props 13 | return ( 14 |
19 |
20 |
21 | {isSvgElement ? ( 22 | 27 | {children} 28 | 29 | ) : ( 30 |
{children}
31 | )} 32 |
33 |
34 |
35 | ) 36 | } 37 | 38 | export default sectionWrapper 39 | -------------------------------------------------------------------------------- /src/components/Footer/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | interface FooterProps { 4 | language: string 5 | onLanguageChange: (language: string) => void 6 | } 7 | 8 | const footer: React.FC = ({ language, onLanguageChange }) => { 9 | return ( 10 |
11 | 17 | Buy Me A Coffee 18 | 19 | . 20 | onLanguageChange(language === 'en' ? 'zh' : 'en')} 23 | > 24 | {language === 'en' ? '简体中文' : 'English'} 25 | 26 |
27 | ) 28 | } 29 | 30 | export default footer 31 | -------------------------------------------------------------------------------- /src/components/Header/index.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | display: flex; 3 | align-items: center; 4 | height: 6rem; 5 | padding: 1rem 2rem; 6 | color: #9da3ae; 7 | .logo { 8 | display: flex; 9 | align-items: center; 10 | svg { 11 | width: 3rem; 12 | height: 3rem; 13 | } 14 | } 15 | .site-title { 16 | font-weight: bold; 17 | font-size: 1.8rem; 18 | cursor: default; 19 | margin-top: 0.4rem; 20 | @media screen and (max-width: 480px) { 21 | display: none; 22 | } 23 | } 24 | .header-right { 25 | margin-left: auto; 26 | .github-logo { 27 | width: 1.8rem; 28 | height: 1.8rem; 29 | color: #9da3ae; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/i18n.ts: -------------------------------------------------------------------------------- 1 | import i18n from 'i18next' 2 | import { initReactI18next } from 'react-i18next' 3 | import { Translations } from './translations' 4 | 5 | interface TranslationMap { 6 | [key: string]: string 7 | } 8 | 9 | type TranslateType = { 10 | id: string 11 | name: string 12 | translation: TranslationMap 13 | } 14 | 15 | interface Resource { 16 | [id: string]: TranslateType 17 | } 18 | 19 | const resources = Translations.reduce((obj, curr) => { 20 | obj[curr.id] = curr 21 | return obj 22 | }, {} as Resource) 23 | 24 | i18n.use(initReactI18next).init({ 25 | fallbackLng: 'en', 26 | resources, 27 | interpolation: { 28 | escapeValue: false, 29 | }, 30 | }) 31 | 32 | export default i18n 33 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @import './scss/iconfont'; 6 | @import './scss/fonts'; 7 | 8 | html { 9 | font: 16px/1.25 -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, 10 | Hiragino Sans GB, Simsun, Arial, sans-self; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | } 14 | 15 | body { 16 | padding: 0; 17 | margin: 0; 18 | } 19 | 20 | p { 21 | margin: 0; 22 | } 23 | 24 | #root { 25 | min-height: 100vh; 26 | background: rgb(41,54,59); 27 | background: linear-gradient(45deg, rgba(41,54,59,1) 0%, rgba(20,22,26,1) 50%, rgba(32,34,58,1) 100%); 28 | color: rgb(245, 245, 245); 29 | } 30 | 31 | .flip { 32 | -moz-transform: scaleX(-1); 33 | -webkit-transform: scaleX(-1); 34 | -o-transform: scaleX(-1); 35 | transform: scaleX(-1); 36 | filter: flipH(); 37 | } -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.scss' 4 | import App from './App' 5 | import './i18n' 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ) 13 | -------------------------------------------------------------------------------- /src/package/accessory/0.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory0: React.FC = () => { 4 | return ( 5 | 12 | ) 13 | } 14 | 15 | export default Accessory0 16 | -------------------------------------------------------------------------------- /src/package/accessory/1.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory1: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | 22 | 23 | 24 | ) 25 | } 26 | 27 | export default Accessory1 28 | -------------------------------------------------------------------------------- /src/package/accessory/10.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory10: React.FC = () => { 4 | return ( 5 | 14 | 19 | 25 | 30 | 31 | 32 | ) 33 | } 34 | 35 | export default Accessory10 36 | -------------------------------------------------------------------------------- /src/package/accessory/11.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory11: React.FC = () => { 4 | return ( 5 | 11 | 19 | 26 | 27 | ) 28 | } 29 | 30 | export default Accessory11 31 | -------------------------------------------------------------------------------- /src/package/accessory/12.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory12: React.FC = () => { 4 | return ( 5 | 11 | 21 | 29 | 37 | 45 | 46 | ) 47 | } 48 | 49 | export default Accessory12 50 | -------------------------------------------------------------------------------- /src/package/accessory/2.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory2: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | 26 | 27 | 28 | ) 29 | } 30 | 31 | export default Accessory2 32 | -------------------------------------------------------------------------------- /src/package/accessory/3.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory3: React.FC = () => { 4 | return ( 5 | 14 | 21 | 25 | 26 | 27 | ) 28 | } 29 | 30 | export default Accessory3 31 | -------------------------------------------------------------------------------- /src/package/accessory/4.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory4: React.FC = () => { 4 | return ( 5 | 14 | 21 | 28 | 38 | 48 | 58 | 68 | 69 | ) 70 | } 71 | 72 | export default Accessory4 73 | -------------------------------------------------------------------------------- /src/package/accessory/5.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory5: React.FC = () => { 4 | return ( 5 | 14 | 20 | 27 | 28 | ) 29 | } 30 | 31 | export default Accessory5 32 | -------------------------------------------------------------------------------- /src/package/accessory/6.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory6: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Accessory6 26 | -------------------------------------------------------------------------------- /src/package/accessory/7.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory7: React.FC = () => { 4 | return ( 5 | 14 | 20 | 29 | 30 | 31 | 32 | ) 33 | } 34 | 35 | export default Accessory7 36 | -------------------------------------------------------------------------------- /src/package/accessory/8.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory8: React.FC = () => { 4 | return ( 5 | 14 | 23 | 32 | 41 | 49 | 57 | 58 | ) 59 | } 60 | 61 | export default Accessory8 62 | -------------------------------------------------------------------------------- /src/package/accessory/9.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Accessory9: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | 22 | 27 | 28 | 29 | 30 | 31 | 32 | ) 33 | } 34 | 35 | export default Accessory9 36 | -------------------------------------------------------------------------------- /src/package/accessory/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Accessory0 from './0' 4 | import Accessory1 from './1' 5 | import Accessory2 from './2' 6 | import Accessory3 from './3' 7 | import Accessory4 from './4' 8 | import Accessory5 from './5' 9 | import Accessory6 from './6' 10 | import Accessory7 from './7' 11 | import Accessory8 from './8' 12 | import Accessory9 from './9' 13 | import Accessory10 from './10' 14 | import Accessory11 from './11' 15 | import Accessory12 from './12' 16 | import { TypeProps } from '../types' 17 | 18 | const Accessory: React.FC = ({ type }) => { 19 | switch (type) { 20 | case 0: { 21 | return 22 | } 23 | case 1: { 24 | return 25 | } 26 | case 2: { 27 | return 28 | } 29 | case 3: { 30 | return 31 | } 32 | case 4: { 33 | return 34 | } 35 | case 5: { 36 | return 37 | } 38 | case 6: { 39 | return 40 | } 41 | case 7: { 42 | return 43 | } 44 | case 8: { 45 | return 46 | } 47 | case 9: { 48 | return 49 | } 50 | case 10: { 51 | return 52 | } 53 | case 11: { 54 | return 55 | } 56 | case 12: { 57 | return 58 | } 59 | default: { 60 | return 61 | } 62 | } 63 | } 64 | 65 | export default Accessory 66 | -------------------------------------------------------------------------------- /src/package/beard/0.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Beard0: React.FC = () => { 4 | return ( 5 | 12 | ) 13 | } 14 | 15 | export default Beard0 16 | -------------------------------------------------------------------------------- /src/package/beard/1.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Beard1: React.FC = () => { 4 | return ( 5 | 14 | 19 | 25 | 30 | 31 | 32 | ) 33 | } 34 | 35 | export default Beard1 36 | -------------------------------------------------------------------------------- /src/package/beard/3.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Beard3: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Beard3 26 | -------------------------------------------------------------------------------- /src/package/beard/6.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Beard6: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Beard6 26 | -------------------------------------------------------------------------------- /src/package/beard/7.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Beard7: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Beard7 26 | -------------------------------------------------------------------------------- /src/package/beard/8.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Beard8: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Beard8 26 | -------------------------------------------------------------------------------- /src/package/beard/9.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Beard9: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Beard9 26 | -------------------------------------------------------------------------------- /src/package/beard/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Beard0 from './0' 4 | import Beard1 from './1' 5 | import Beard2 from './2' 6 | import Beard3 from './3' 7 | import Beard4 from './4' 8 | import Beard5 from './5' 9 | import Beard6 from './6' 10 | import Beard7 from './7' 11 | import Beard8 from './8' 12 | import Beard9 from './9' 13 | import Beard10 from './10' 14 | import Beard11 from './11' 15 | import Beard12 from './12' 16 | import Beard13 from './13' 17 | import Beard14 from './14' 18 | import Beard15 from './15' 19 | import Beard16 from './16' 20 | import { TypeProps } from '../types' 21 | 22 | const Beard: React.FC = ({ type }) => { 23 | switch (type) { 24 | case 0: { 25 | return 26 | } 27 | case 1: { 28 | return 29 | } 30 | case 2: { 31 | return 32 | } 33 | case 3: { 34 | return 35 | } 36 | case 4: { 37 | return 38 | } 39 | case 5: { 40 | return 41 | } 42 | case 6: { 43 | return 44 | } 45 | case 7: { 46 | return 47 | } 48 | case 8: { 49 | return 50 | } 51 | case 9: { 52 | return 53 | } 54 | case 10: { 55 | return 56 | } 57 | case 11: { 58 | return 59 | } 60 | case 12: { 61 | return 62 | } 63 | case 13: { 64 | return 65 | } 66 | case 14: { 67 | return 68 | } 69 | case 15: { 70 | return 71 | } 72 | case 16: { 73 | return 74 | } 75 | default: { 76 | return 77 | } 78 | } 79 | } 80 | 81 | export default Beard 82 | -------------------------------------------------------------------------------- /src/package/const.ts: -------------------------------------------------------------------------------- 1 | import { AvatarConfig } from './types' 2 | 3 | export const AvatarConfigCount: AvatarConfig = { 4 | face: 11, 5 | nose: 14, 6 | mouth: 20, 7 | eye: 14, 8 | eyebrow: 16, 9 | glass: 13, 10 | hair: 58, 11 | accessory: 13, 12 | detail: 14, 13 | beard: 17, 14 | } 15 | 16 | export const ShapeBorderRadius = { 17 | circle: '100%', 18 | rounded: '6px', 19 | square: 0, 20 | } 21 | -------------------------------------------------------------------------------- /src/package/detail/0.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail0: React.FC = () => { 4 | return ( 5 | 12 | ) 13 | } 14 | 15 | export default Detail0 16 | -------------------------------------------------------------------------------- /src/package/detail/1.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail1: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Detail1 25 | -------------------------------------------------------------------------------- /src/package/detail/10.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail10: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Detail10 25 | -------------------------------------------------------------------------------- /src/package/detail/11.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail11: React.FC = () => { 4 | return ( 5 | 15 | 22 | 29 | 30 | ) 31 | } 32 | 33 | export default Detail11 34 | -------------------------------------------------------------------------------- /src/package/detail/12.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail12: React.FC = () => { 4 | return ( 5 | 15 | 25 | 35 | 36 | ) 37 | } 38 | 39 | export default Detail12 40 | -------------------------------------------------------------------------------- /src/package/detail/13.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail13: React.FC = () => { 4 | return ( 5 | 15 | 19 | 20 | ) 21 | } 22 | 23 | export default Detail13 24 | -------------------------------------------------------------------------------- /src/package/detail/2.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail2: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Detail2 25 | -------------------------------------------------------------------------------- /src/package/detail/3.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail3: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Detail3 25 | -------------------------------------------------------------------------------- /src/package/detail/4.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail4: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Detail4 25 | -------------------------------------------------------------------------------- /src/package/detail/5.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail5: React.FC = () => { 4 | return ( 5 | 14 | 20 | 24 | 28 | 29 | 30 | ) 31 | } 32 | 33 | export default Detail5 34 | -------------------------------------------------------------------------------- /src/package/detail/6.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail6: React.FC = () => { 4 | return ( 5 | 14 | 22 | 23 | ) 24 | } 25 | 26 | export default Detail6 27 | -------------------------------------------------------------------------------- /src/package/detail/7.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail7: React.FC = () => { 4 | return ( 5 | 14 | 20 | 26 | 27 | ) 28 | } 29 | 30 | export default Detail7 31 | -------------------------------------------------------------------------------- /src/package/detail/8.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail8: React.FC = () => { 4 | return ( 5 | 14 | 20 | 27 | 28 | ) 29 | } 30 | 31 | export default Detail8 32 | -------------------------------------------------------------------------------- /src/package/detail/9.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Detail9: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Detail9 25 | -------------------------------------------------------------------------------- /src/package/detail/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Detail0 from './0' 4 | import Detail1 from './1' 5 | import Detail2 from './2' 6 | import Detail3 from './3' 7 | import Detail4 from './4' 8 | import Detail5 from './5' 9 | import Detail6 from './6' 10 | import Detail7 from './7' 11 | import Detail8 from './8' 12 | import Detail9 from './9' 13 | import Detail10 from './10' 14 | import Detail11 from './11' 15 | import Detail12 from './12' 16 | import Detail13 from './13' 17 | import { TypeProps } from '../types' 18 | 19 | const Detail: React.FC = ({ type }) => { 20 | switch (type) { 21 | case 0: { 22 | return 23 | } 24 | case 1: { 25 | return 26 | } 27 | case 2: { 28 | return 29 | } 30 | case 3: { 31 | return 32 | } 33 | case 4: { 34 | return 35 | } 36 | case 5: { 37 | return 38 | } 39 | case 6: { 40 | return 41 | } 42 | case 7: { 43 | return 44 | } 45 | case 8: { 46 | return 47 | } 48 | case 9: { 49 | return 50 | } 51 | case 10: { 52 | return 53 | } 54 | case 11: { 55 | return 56 | } 57 | case 12: { 58 | return 59 | } 60 | case 13: { 61 | return 62 | } 63 | default: { 64 | return 65 | } 66 | } 67 | } 68 | 69 | export default Detail 70 | -------------------------------------------------------------------------------- /src/package/eye/0.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye0: React.FC = () => { 4 | return ( 5 | 12 | 17 | 18 | ) 19 | } 20 | 21 | export default Eye0 22 | -------------------------------------------------------------------------------- /src/package/eye/1.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye1: React.FC = () => { 4 | return ( 5 | 12 | 13 | 18 | 25 | 26 | 27 | 28 | 29 | 30 | ) 31 | } 32 | 33 | export default Eye1 34 | -------------------------------------------------------------------------------- /src/package/eye/10.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye10: React.FC = () => { 4 | return ( 5 | 12 | 13 | 14 | 15 | 24 | 25 | 26 | 34 | 43 | 44 | 45 | 46 | ) 47 | } 48 | 49 | export default Eye10 50 | -------------------------------------------------------------------------------- /src/package/eye/11.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye11: React.FC = () => { 4 | return ( 5 | 13 | 20 | 27 | 28 | ) 29 | } 30 | 31 | export default Eye11 32 | -------------------------------------------------------------------------------- /src/package/eye/12.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye12: React.FC = () => { 4 | return ( 5 | 13 | 23 | 33 | 34 | ) 35 | } 36 | 37 | export default Eye12 38 | -------------------------------------------------------------------------------- /src/package/eye/2.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye2: React.FC = () => { 4 | return ( 5 | 12 | 17 | 18 | ) 19 | } 20 | 21 | export default Eye2 22 | -------------------------------------------------------------------------------- /src/package/eye/3.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye3: React.FC = () => { 4 | return ( 5 | 14 | 20 | 25 | 29 | 30 | 31 | ) 32 | } 33 | 34 | export default Eye3 35 | -------------------------------------------------------------------------------- /src/package/eye/4.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye4: React.FC = () => { 4 | return ( 5 | 12 | 17 | 18 | ) 19 | } 20 | 21 | export default Eye4 22 | -------------------------------------------------------------------------------- /src/package/eye/5.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye5: React.FC = () => { 4 | return ( 5 | 12 | 13 | 14 | 24 | 32 | 33 | 34 | 35 | 45 | 53 | 54 | 55 | 56 | 57 | ) 58 | } 59 | 60 | export default Eye5 61 | -------------------------------------------------------------------------------- /src/package/eye/6.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye6: React.FC = () => { 4 | return ( 5 | 12 | 13 | 14 | 22 | 30 | 39 | 40 | 41 | ) 42 | } 43 | 44 | export default Eye6 45 | -------------------------------------------------------------------------------- /src/package/eye/7.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye7: React.FC = () => { 4 | return ( 5 | 12 | 17 | 18 | ) 19 | } 20 | 21 | export default Eye7 22 | -------------------------------------------------------------------------------- /src/package/eye/8.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye8: React.FC = () => { 4 | return ( 5 | 12 | 17 | 18 | ) 19 | } 20 | 21 | export default Eye8 22 | -------------------------------------------------------------------------------- /src/package/eye/9.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eye9: React.FC = () => { 4 | return ( 5 | 12 | 17 | 18 | ) 19 | } 20 | 21 | export default Eye9 22 | -------------------------------------------------------------------------------- /src/package/eye/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Eye0 from './0' 4 | import Eye1 from './1' 5 | import Eye2 from './2' 6 | import Eye3 from './3' 7 | import Eye4 from './4' 8 | import Eye5 from './5' 9 | import Eye6 from './6' 10 | import Eye7 from './7' 11 | import Eye8 from './8' 12 | import Eye9 from './9' 13 | import Eye10 from './10' 14 | import Eye11 from './11' 15 | import Eye12 from './12' 16 | import Eye13 from './13' 17 | import { TypeProps } from '../types' 18 | 19 | const Eye: React.FC = ({ type }) => { 20 | switch (type) { 21 | case 0: { 22 | return 23 | } 24 | case 1: { 25 | return 26 | } 27 | case 2: { 28 | return 29 | } 30 | case 3: { 31 | return 32 | } 33 | case 4: { 34 | return 35 | } 36 | case 5: { 37 | return 38 | } 39 | case 6: { 40 | return 41 | } 42 | case 7: { 43 | return 44 | } 45 | case 8: { 46 | return 47 | } 48 | case 9: { 49 | return 50 | } 51 | case 10: { 52 | return 53 | } 54 | case 11: { 55 | return 56 | } 57 | case 12: { 58 | return 59 | } 60 | case 13: { 61 | return 62 | } 63 | default: { 64 | return 65 | } 66 | } 67 | } 68 | 69 | export default Eye 70 | -------------------------------------------------------------------------------- /src/package/eyebrow/0.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow0: React.FC = () => { 4 | return ( 5 | 14 | 20 | 24 | 28 | 29 | 30 | ) 31 | } 32 | 33 | export default Eyebrow0 34 | -------------------------------------------------------------------------------- /src/package/eyebrow/1.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow1: React.FC = () => { 4 | return ( 5 | 14 | 20 | 24 | 28 | 29 | 30 | ) 31 | } 32 | 33 | export default Eyebrow1 34 | -------------------------------------------------------------------------------- /src/package/eyebrow/10.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow10: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Eyebrow10 26 | -------------------------------------------------------------------------------- /src/package/eyebrow/11.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow11: React.FC = () => { 4 | return ( 5 | 15 | 25 | 35 | 36 | ) 37 | } 38 | 39 | export default Eyebrow11 40 | -------------------------------------------------------------------------------- /src/package/eyebrow/12.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow12: React.FC = () => { 4 | return ( 5 | 15 | 25 | 35 | 36 | ) 37 | } 38 | 39 | export default Eyebrow12 40 | -------------------------------------------------------------------------------- /src/package/eyebrow/13.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow13: React.FC = () => { 4 | return ( 5 | 15 | 25 | 35 | 36 | ) 37 | } 38 | 39 | export default Eyebrow13 40 | -------------------------------------------------------------------------------- /src/package/eyebrow/14.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow14: React.FC = () => { 4 | return ( 5 | 15 | 25 | 35 | 36 | ) 37 | } 38 | 39 | export default Eyebrow14 40 | -------------------------------------------------------------------------------- /src/package/eyebrow/15.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow15: React.FC = () => { 4 | return ( 5 | 15 | 25 | 35 | 36 | ) 37 | } 38 | 39 | export default Eyebrow15 40 | -------------------------------------------------------------------------------- /src/package/eyebrow/2.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow2: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Eyebrow2 26 | -------------------------------------------------------------------------------- /src/package/eyebrow/3.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow3: React.FC = () => { 4 | return ( 5 | 14 | 20 | 25 | 29 | 30 | 31 | ) 32 | } 33 | 34 | export default Eyebrow3 35 | -------------------------------------------------------------------------------- /src/package/eyebrow/4.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow4: React.FC = () => { 4 | return ( 5 | 14 | 20 | 24 | 28 | 29 | 30 | ) 31 | } 32 | 33 | export default Eyebrow4 34 | -------------------------------------------------------------------------------- /src/package/eyebrow/5.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow5: React.FC = () => { 4 | return ( 5 | 14 | 20 | 28 | 36 | 37 | 38 | ) 39 | } 40 | 41 | export default Eyebrow5 42 | -------------------------------------------------------------------------------- /src/package/eyebrow/6.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow6: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Eyebrow6 26 | -------------------------------------------------------------------------------- /src/package/eyebrow/7.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow7: React.FC = () => { 4 | return ( 5 | 14 | 20 | 25 | 30 | 31 | 32 | ) 33 | } 34 | 35 | export default Eyebrow7 36 | -------------------------------------------------------------------------------- /src/package/eyebrow/8.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow8: React.FC = () => { 4 | return ( 5 | 14 | 20 | 24 | 29 | 30 | 31 | ) 32 | } 33 | 34 | export default Eyebrow8 35 | -------------------------------------------------------------------------------- /src/package/eyebrow/9.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Eyebrow9: React.FC = () => { 4 | return ( 5 | 14 | 20 | 24 | 29 | 30 | 31 | ) 32 | } 33 | 34 | export default Eyebrow9 35 | -------------------------------------------------------------------------------- /src/package/eyebrow/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Eyebrow0 from './0' 4 | import Eyebrow1 from './1' 5 | import Eyebrow2 from './2' 6 | import Eyebrow3 from './3' 7 | import Eyebrow4 from './4' 8 | import Eyebrow5 from './5' 9 | import Eyebrow6 from './6' 10 | import Eyebrow7 from './7' 11 | import Eyebrow8 from './8' 12 | import Eyebrow9 from './9' 13 | import Eyebrow10 from './10' 14 | import Eyebrow11 from './11' 15 | import Eyebrow12 from './12' 16 | import Eyebrow13 from './13' 17 | import Eyebrow14 from './14' 18 | import Eyebrow15 from './15' 19 | import { TypeProps } from '../types' 20 | 21 | const Eyebrow: React.FC = ({ type }) => { 22 | switch (type) { 23 | case 0: { 24 | return 25 | } 26 | case 1: { 27 | return 28 | } 29 | case 2: { 30 | return 31 | } 32 | case 3: { 33 | return 34 | } 35 | case 4: { 36 | return 37 | } 38 | case 5: { 39 | return 40 | } 41 | case 6: { 42 | return 43 | } 44 | case 7: { 45 | return 46 | } 47 | case 8: { 48 | return 49 | } 50 | case 9: { 51 | return 52 | } 53 | case 10: { 54 | return 55 | } 56 | case 11: { 57 | return 58 | } 59 | case 12: { 60 | return 61 | } 62 | case 13: { 63 | return 64 | } 65 | case 14: { 66 | return 67 | } 68 | case 15: { 69 | return 70 | } 71 | default: { 72 | return 73 | } 74 | } 75 | } 76 | 77 | export default Eyebrow 78 | -------------------------------------------------------------------------------- /src/package/face/0.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Face0: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Face0 25 | -------------------------------------------------------------------------------- /src/package/face/1.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Face1: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Face1 25 | -------------------------------------------------------------------------------- /src/package/face/10.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Face10: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Face10 25 | -------------------------------------------------------------------------------- /src/package/face/2.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Face2: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Face2 25 | -------------------------------------------------------------------------------- /src/package/face/3.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Face3: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Face3 25 | -------------------------------------------------------------------------------- /src/package/face/4.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Face4: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Face4 25 | -------------------------------------------------------------------------------- /src/package/face/5.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Face5: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Face5 25 | -------------------------------------------------------------------------------- /src/package/face/6.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Face6: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Face6 25 | -------------------------------------------------------------------------------- /src/package/face/7.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Face7: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Face7 25 | -------------------------------------------------------------------------------- /src/package/face/8.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Face8: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Face8 25 | -------------------------------------------------------------------------------- /src/package/face/9.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Face9: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Face9 25 | -------------------------------------------------------------------------------- /src/package/face/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Face0 from './0' 4 | import Face1 from './1' 5 | import Face2 from './2' 6 | import Face3 from './3' 7 | import Face4 from './4' 8 | import Face5 from './5' 9 | import Face6 from './6' 10 | import Face7 from './7' 11 | import Face8 from './8' 12 | import Face9 from './9' 13 | import Face10 from './10' 14 | import { TypeProps } from '../types' 15 | 16 | const Face: React.FC = ({ type }) => { 17 | switch (type) { 18 | case 0: { 19 | return 20 | } 21 | case 1: { 22 | return 23 | } 24 | case 2: { 25 | return 26 | } 27 | case 3: { 28 | return 29 | } 30 | case 4: { 31 | return 32 | } 33 | case 5: { 34 | return 35 | } 36 | case 6: { 37 | return 38 | } 39 | case 7: { 40 | return 41 | } 42 | case 8: { 43 | return 44 | } 45 | case 9: { 46 | return 47 | } 48 | case 10: { 49 | return 50 | } 51 | default: { 52 | return 53 | } 54 | } 55 | } 56 | 57 | export default Face 58 | -------------------------------------------------------------------------------- /src/package/glass/0.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Glass0: React.FC = () => { 4 | return ( 5 | 12 | ) 13 | } 14 | 15 | export default Glass0 16 | -------------------------------------------------------------------------------- /src/package/glass/1.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Glass1: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | 22 | 26 | 34 | 35 | 36 | ) 37 | } 38 | 39 | export default Glass1 40 | -------------------------------------------------------------------------------- /src/package/glass/3.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Glass3: React.FC = () => { 4 | return ( 5 | 14 | 20 | 24 | 29 | 36 | 43 | 51 | 52 | 53 | ) 54 | } 55 | 56 | export default Glass3 57 | -------------------------------------------------------------------------------- /src/package/glass/7.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Glass7: React.FC = () => { 4 | return ( 5 | 14 | 21 | 25 | 26 | 27 | 28 | ) 29 | } 30 | 31 | export default Glass7 32 | -------------------------------------------------------------------------------- /src/package/glass/9.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Glass9: React.FC = () => { 4 | return ( 5 | 14 | 21 | 25 | 26 | 27 | 28 | ) 29 | } 30 | 31 | export default Glass9 32 | -------------------------------------------------------------------------------- /src/package/glass/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Glass0 from './0' 4 | import Glass1 from './1' 5 | import Glass2 from './2' 6 | import Glass3 from './3' 7 | import Glass4 from './4' 8 | import Glass5 from './5' 9 | import Glass6 from './6' 10 | import Glass7 from './7' 11 | import Glass8 from './8' 12 | import Glass9 from './9' 13 | import Glass10 from './10' 14 | import Glass11 from './11' 15 | import Glass12 from './12' 16 | import { TypeProps } from '../types' 17 | 18 | const Glass: React.FC = ({ type }) => { 19 | switch (type) { 20 | case 0: { 21 | return 22 | } 23 | case 1: { 24 | return 25 | } 26 | case 2: { 27 | return 28 | } 29 | case 3: { 30 | return 31 | } 32 | case 4: { 33 | return 34 | } 35 | case 5: { 36 | return 37 | } 38 | case 6: { 39 | return 40 | } 41 | case 7: { 42 | return 43 | } 44 | case 8: { 45 | return 46 | } 47 | case 9: { 48 | return 49 | } 50 | case 10: { 51 | return 52 | } 53 | case 11: { 54 | return 55 | } 56 | case 12: { 57 | return 58 | } 59 | default: { 60 | return 61 | } 62 | } 63 | } 64 | 65 | export default Glass 66 | -------------------------------------------------------------------------------- /src/package/hair/0.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair0: React.FC = () => { 4 | return ( 5 | 12 | ) 13 | } 14 | 15 | export default Hair0 16 | -------------------------------------------------------------------------------- /src/package/hair/1.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair1: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair1 26 | -------------------------------------------------------------------------------- /src/package/hair/10.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair10: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair10 26 | -------------------------------------------------------------------------------- /src/package/hair/12.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair12: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair12 26 | -------------------------------------------------------------------------------- /src/package/hair/14.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair14: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair14 26 | -------------------------------------------------------------------------------- /src/package/hair/15.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair15: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair15 26 | -------------------------------------------------------------------------------- /src/package/hair/16.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair16: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair16 26 | -------------------------------------------------------------------------------- /src/package/hair/17.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair17: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair17 26 | -------------------------------------------------------------------------------- /src/package/hair/18.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair18: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair18 26 | -------------------------------------------------------------------------------- /src/package/hair/19.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair19: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair19 26 | -------------------------------------------------------------------------------- /src/package/hair/2.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair2: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair2 26 | -------------------------------------------------------------------------------- /src/package/hair/20.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair20: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair20 26 | -------------------------------------------------------------------------------- /src/package/hair/21.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair21: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair21 26 | -------------------------------------------------------------------------------- /src/package/hair/22.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair22: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair22 26 | -------------------------------------------------------------------------------- /src/package/hair/23.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair23: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair23 26 | -------------------------------------------------------------------------------- /src/package/hair/25.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair25: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair25 26 | -------------------------------------------------------------------------------- /src/package/hair/26.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair26: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair26 26 | -------------------------------------------------------------------------------- /src/package/hair/27.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair27: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair27 26 | -------------------------------------------------------------------------------- /src/package/hair/29.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair29: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair29 26 | -------------------------------------------------------------------------------- /src/package/hair/30.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair30: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair30 26 | -------------------------------------------------------------------------------- /src/package/hair/32.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair32: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair32 30 | -------------------------------------------------------------------------------- /src/package/hair/35.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair35: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair35 30 | -------------------------------------------------------------------------------- /src/package/hair/36.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair36: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair36 30 | -------------------------------------------------------------------------------- /src/package/hair/37.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair37: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair37 30 | -------------------------------------------------------------------------------- /src/package/hair/38.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair38: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair38 30 | -------------------------------------------------------------------------------- /src/package/hair/39.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair39: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair39 30 | -------------------------------------------------------------------------------- /src/package/hair/4.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair4: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair4 26 | -------------------------------------------------------------------------------- /src/package/hair/40.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair40: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair40 30 | -------------------------------------------------------------------------------- /src/package/hair/42.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair42: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair42 30 | -------------------------------------------------------------------------------- /src/package/hair/44.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair44: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair44 30 | -------------------------------------------------------------------------------- /src/package/hair/45.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair45: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair45 30 | -------------------------------------------------------------------------------- /src/package/hair/46.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair46: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair46 30 | -------------------------------------------------------------------------------- /src/package/hair/47.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair47: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair47 30 | -------------------------------------------------------------------------------- /src/package/hair/48.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair48: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair48 30 | -------------------------------------------------------------------------------- /src/package/hair/49.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair49: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair49 30 | -------------------------------------------------------------------------------- /src/package/hair/5.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair5: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair5 26 | -------------------------------------------------------------------------------- /src/package/hair/53.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair53: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair53 30 | -------------------------------------------------------------------------------- /src/package/hair/54.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair54: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair54 30 | -------------------------------------------------------------------------------- /src/package/hair/55.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair55: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair55 30 | -------------------------------------------------------------------------------- /src/package/hair/56.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair56: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair56 30 | -------------------------------------------------------------------------------- /src/package/hair/57.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair57: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Hair57 30 | -------------------------------------------------------------------------------- /src/package/hair/6.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair6: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair6 26 | -------------------------------------------------------------------------------- /src/package/hair/7.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair7: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair7 26 | -------------------------------------------------------------------------------- /src/package/hair/8.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hair8: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Hair8 26 | -------------------------------------------------------------------------------- /src/package/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ShapeBorderRadius } from './const' 3 | import Accessory from './accessory' 4 | import Beard from './beard/index' 5 | import Detail from './detail/index' 6 | import Eye from './eye/index' 7 | import Eyebrow from './eyebrow/index' 8 | import Face from './face/index' 9 | import Glass from './glass/index' 10 | import Hair from './hair/index' 11 | import Mouth from './mouth/index' 12 | import Nose from './nose/index' 13 | import { NotionAvatarProps } from './types' 14 | 15 | const NotionAvatar: React.FC = (props) => { 16 | const { className, style, shape = 'circle', bgColor, config } = props 17 | const { 18 | face, 19 | eye, 20 | eyebrow, 21 | glass, 22 | hair, 23 | mouth, 24 | nose, 25 | accessory, 26 | beard, 27 | detail, 28 | } = config 29 | const borderRadius = ShapeBorderRadius[shape] 30 | return ( 31 |
41 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | ) 59 | } 60 | 61 | export default NotionAvatar 62 | 63 | export { getRandomConfig } from './utils' 64 | -------------------------------------------------------------------------------- /src/package/mouth/0.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth0: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Mouth0 25 | -------------------------------------------------------------------------------- /src/package/mouth/1.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth1: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Mouth1 25 | -------------------------------------------------------------------------------- /src/package/mouth/10.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth10: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Mouth10 25 | -------------------------------------------------------------------------------- /src/package/mouth/11.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth11: React.FC = () => { 4 | return ( 5 | 15 | 24 | 25 | ) 26 | } 27 | 28 | export default Mouth11 29 | -------------------------------------------------------------------------------- /src/package/mouth/12.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth12: React.FC = () => { 4 | return ( 5 | 15 | 24 | 31 | 32 | ) 33 | } 34 | 35 | export default Mouth12 36 | -------------------------------------------------------------------------------- /src/package/mouth/13.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth13: React.FC = () => { 4 | return ( 5 | 15 | 22 | 29 | 36 | 43 | 44 | ) 45 | } 46 | 47 | export default Mouth13 48 | -------------------------------------------------------------------------------- /src/package/mouth/14.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth14: React.FC = () => { 4 | return ( 5 | 15 | 24 | 31 | 32 | ) 33 | } 34 | 35 | export default Mouth14 36 | -------------------------------------------------------------------------------- /src/package/mouth/15.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth15: React.FC = () => { 4 | return ( 5 | 15 | 22 | 31 | 38 | 39 | ) 40 | } 41 | 42 | export default Mouth15 43 | -------------------------------------------------------------------------------- /src/package/mouth/16.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth16: React.FC = () => { 4 | return ( 5 | 15 | 24 | 33 | 34 | ) 35 | } 36 | 37 | export default Mouth16 38 | -------------------------------------------------------------------------------- /src/package/mouth/17.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth17: React.FC = () => { 4 | return ( 5 | 15 | 24 | 31 | 38 | 45 | 46 | ) 47 | } 48 | 49 | export default Mouth17 50 | -------------------------------------------------------------------------------- /src/package/mouth/18.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth18: React.FC = () => { 4 | return ( 5 | 15 | 24 | 31 | 32 | ) 33 | } 34 | 35 | export default Mouth18 36 | -------------------------------------------------------------------------------- /src/package/mouth/19.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth19: React.FC = () => { 4 | return ( 5 | 15 | 24 | 31 | 32 | ) 33 | } 34 | 35 | export default Mouth19 36 | -------------------------------------------------------------------------------- /src/package/mouth/2.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth2: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Mouth2 25 | -------------------------------------------------------------------------------- /src/package/mouth/3.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth3: React.FC = () => { 4 | return ( 5 | 14 | 20 | 24 | 28 | 32 | 33 | 34 | ) 35 | } 36 | 37 | export default Mouth3 38 | -------------------------------------------------------------------------------- /src/package/mouth/4.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth4: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Mouth4 25 | -------------------------------------------------------------------------------- /src/package/mouth/5.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth5: React.FC = () => { 4 | return ( 5 | 14 | 22 | 23 | ) 24 | } 25 | 26 | export default Mouth5 27 | -------------------------------------------------------------------------------- /src/package/mouth/6.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth6: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Mouth6 25 | -------------------------------------------------------------------------------- /src/package/mouth/7.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth7: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Mouth7 26 | -------------------------------------------------------------------------------- /src/package/mouth/8.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth8: React.FC = () => { 4 | return ( 5 | 14 | 20 | 24 | 28 | 29 | 30 | ) 31 | } 32 | 33 | export default Mouth8 34 | -------------------------------------------------------------------------------- /src/package/mouth/9.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Mouth9: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Mouth9 25 | -------------------------------------------------------------------------------- /src/package/nose/0.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose0: React.FC = () => { 4 | return ( 5 | 14 | 24 | 25 | ) 26 | } 27 | 28 | export default Nose0 29 | -------------------------------------------------------------------------------- /src/package/nose/1.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose1: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Nose1 26 | -------------------------------------------------------------------------------- /src/package/nose/10.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose10: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Nose10 25 | -------------------------------------------------------------------------------- /src/package/nose/11.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose11: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Nose11 30 | -------------------------------------------------------------------------------- /src/package/nose/12.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose12: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Nose12 30 | -------------------------------------------------------------------------------- /src/package/nose/13.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose13: React.FC = () => { 4 | return ( 5 | 15 | 25 | 26 | ) 27 | } 28 | 29 | export default Nose13 30 | -------------------------------------------------------------------------------- /src/package/nose/2.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose2: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Nose2 26 | -------------------------------------------------------------------------------- /src/package/nose/3.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose3: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Nose3 26 | -------------------------------------------------------------------------------- /src/package/nose/4.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose4: React.FC = () => { 4 | return ( 5 | 14 | 21 | 22 | ) 23 | } 24 | 25 | export default Nose4 26 | -------------------------------------------------------------------------------- /src/package/nose/5.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose5: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Nose5 25 | -------------------------------------------------------------------------------- /src/package/nose/6.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose6: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Nose6 25 | -------------------------------------------------------------------------------- /src/package/nose/7.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose7: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Nose7 25 | -------------------------------------------------------------------------------- /src/package/nose/8.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose8: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Nose8 25 | -------------------------------------------------------------------------------- /src/package/nose/9.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Nose9: React.FC = () => { 4 | return ( 5 | 14 | 20 | 21 | ) 22 | } 23 | 24 | export default Nose9 25 | -------------------------------------------------------------------------------- /src/package/nose/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Nose0 from './0' 4 | import Nose1 from './1' 5 | import Nose2 from './2' 6 | import Nose3 from './3' 7 | import Nose4 from './4' 8 | import Nose5 from './5' 9 | import Nose6 from './6' 10 | import Nose7 from './7' 11 | import Nose8 from './8' 12 | import Nose9 from './9' 13 | import Nose10 from './10' 14 | import Nose11 from './11' 15 | import Nose12 from './12' 16 | import Nose13 from './13' 17 | import { TypeProps } from '../types' 18 | 19 | const Nose: React.FC = ({ type }) => { 20 | switch (type) { 21 | case 0: { 22 | return 23 | } 24 | case 1: { 25 | return 26 | } 27 | case 2: { 28 | return 29 | } 30 | case 3: { 31 | return 32 | } 33 | case 4: { 34 | return 35 | } 36 | case 5: { 37 | return 38 | } 39 | case 6: { 40 | return 41 | } 42 | case 7: { 43 | return 44 | } 45 | case 8: { 46 | return 47 | } 48 | case 9: { 49 | return 50 | } 51 | case 10: { 52 | return 53 | } 54 | case 11: { 55 | return 56 | } 57 | case 12: { 58 | return 59 | } 60 | case 13: { 61 | return 62 | } 63 | default: { 64 | return 65 | } 66 | } 67 | } 68 | 69 | export default Nose 70 | -------------------------------------------------------------------------------- /src/package/types.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export interface TypeProps { 4 | type: number 5 | } 6 | 7 | type Style = { 8 | [key: string]: string | number | boolean 9 | } 10 | 11 | export interface AvatarConfig { 12 | face: number 13 | eye: number 14 | eyebrow: number 15 | glass: number 16 | hair: number 17 | mouth: number 18 | nose: number 19 | accessory: number 20 | beard: number 21 | detail: number 22 | } 23 | 24 | export type ShapeTypes = 'circle' | 'rounded' | 'square' 25 | 26 | export interface NotionAvatarProps { 27 | className?: string 28 | style?: Style 29 | shape?: ShapeTypes 30 | bgColor?: string 31 | config: AvatarConfig 32 | } 33 | 34 | export type AvatarPart = keyof AvatarConfig 35 | 36 | declare const getRandomConfig: () => AvatarConfig 37 | 38 | declare const NotionAvatar: React.FC 39 | 40 | export { NotionAvatar as default, getRandomConfig } 41 | -------------------------------------------------------------------------------- /src/package/utils.ts: -------------------------------------------------------------------------------- 1 | import { AvatarConfigCount } from './const' 2 | import { AvatarConfig, AvatarPart } from './types' 3 | 4 | export const getRandomConfig = (): AvatarConfig => { 5 | const randomConfig = Object.keys(AvatarConfigCount).reduce( 6 | (prev, next) => 7 | Object.assign(prev, { 8 | [next]: Math.floor( 9 | Math.random() * (AvatarConfigCount[next as AvatarPart] + 1) 10 | ), 11 | }), 12 | {} as Record 13 | ) 14 | randomConfig.detail = 0 15 | randomConfig.accessory = 0 16 | randomConfig.beard = 0 17 | return randomConfig 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/_fonts.scss: -------------------------------------------------------------------------------- 1 | $assets: './fonts'; 2 | 3 | @font-face { 4 | font-family: 'sfrounded'; 5 | src: url('#{$assets}/SFRounded-bold.woff'); 6 | font-weight: bold; 7 | font-style: normal; 8 | } 9 | 10 | .font-sf { 11 | font-family: 'sfrounded'; 12 | font-weight: bold; 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/_iconfont.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; /* Project id 3237384 */ 3 | src: url('//at.alicdn.com/t/font_3237384_9ua6gghqb9.woff2?t=1647088605165') format('woff2'), 4 | url('//at.alicdn.com/t/font_3237384_9ua6gghqb9.woff?t=1647088605165') format('woff'), 5 | url('//at.alicdn.com/t/font_3237384_9ua6gghqb9.ttf?t=1647088605165') format('truetype'); 6 | } 7 | 8 | .iconfont { 9 | font-family: "iconfont" !important; 10 | font-size: 16px; 11 | font-style: normal; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | .icon-github:before { 17 | content: "\e651"; 18 | } 19 | 20 | .icon-Notion:before { 21 | content: "\e740"; 22 | width: 2.5rem; 23 | } 24 | 25 | .icon-dice-d-solid:before { 26 | content: "\e674"; 27 | } 28 | 29 | .icon-download:before { 30 | content: "\e7ef"; 31 | } 32 | 33 | .icon-Palette:before { 34 | content: "\e673"; 35 | } 36 | 37 | .icon-flip-horizontally:before { 38 | content: "\e70b"; 39 | } 40 | 41 | .icon-code:before { 42 | content: "\e6f2"; 43 | } 44 | -------------------------------------------------------------------------------- /src/scss/_mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin breakpoint($class) { 2 | @if $class == tablet { 3 | @media (min-width: 640px) { @content; } 4 | } 5 | @else if $class == laptop { 6 | @media (min-width: 768px) { @content; } 7 | } 8 | @else if $class == desktop { 9 | @media (min-width: 1280px) { @content; } 10 | } 11 | @else if $class == highres { 12 | @media (min-width: 1680px) { @content; } 13 | } 14 | @else if $class == 5k { 15 | @media (min-width: 2000px) { @content; } 16 | } 17 | @else { 18 | @warn "Breakpoint mixin supports: mobile, tablet, desktop, highres"; 19 | } 20 | } -------------------------------------------------------------------------------- /src/scss/fonts/SFRounded-bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zonemeen/react-notion-avatar/ed9a6386d5261e5889f52fba860cc85427a1131d/src/scss/fonts/SFRounded-bold.woff -------------------------------------------------------------------------------- /src/translations.ts: -------------------------------------------------------------------------------- 1 | export const Translations = [ 2 | { 3 | id: 'en', 4 | name: 'English', 5 | translation: { 6 | 'tip.Face': 'Face', 7 | 'tip.Eye': 'Eye', 8 | 'tip.Eyebrow': 'Eyebrow', 9 | 'tip.Glass': 'Glass', 10 | 'tip.Hair': 'Hair', 11 | 'tip.Mouth': 'Mouth', 12 | 'tip.Nose': 'Nose', 13 | 'tip.Beard': 'Beard', 14 | 'tip.Accessory': 'Accessory', 15 | 'tip.Detail': 'Detail', 16 | 'tip.Shape': 'Shape', 17 | 'tip.Flip': 'Flip', 18 | 'tip.Palette': 'Palette', 19 | 'tip.Random': 'Random', 20 | 'tip.Config': 'Config', 21 | 'tip.Download': 'Download', 22 | Copy: 'Copy', 23 | Copied: 'Copied!', 24 | }, 25 | }, 26 | { 27 | id: 'zh', 28 | name: '简体中文', 29 | translation: { 30 | 'tip.Face': '脸', 31 | 'tip.Eye': '眼睛', 32 | 'tip.Eyebrow': '眉毛', 33 | 'tip.Glass': '眼镜', 34 | 'tip.Hair': '头发', 35 | 'tip.Mouth': '嘴巴', 36 | 'tip.Nose': '鼻子', 37 | 'tip.Beard': '胡须', 38 | 'tip.Accessory': '配饰', 39 | 'tip.Detail': '细节', 40 | 'tip.Shape': '形状', 41 | 'tip.Flip': '翻转', 42 | 'tip.Palette': '背景色', 43 | 'tip.Random': '随机', 44 | 'tip.Config': '配置', 45 | 'tip.Download': '下载', 46 | Copy: '复制', 47 | Copied: '已复制!', 48 | }, 49 | }, 50 | ] 51 | -------------------------------------------------------------------------------- /src/utils/copy.ts: -------------------------------------------------------------------------------- 1 | export function copyTextToClipboard( 2 | input: string, 3 | { target = document.body } = {} 4 | ) { 5 | const element = document.createElement('textarea') 6 | const previouslyFocusedElement = document.activeElement 7 | 8 | element.value = input 9 | 10 | // Prevent keyboard from showing on mobile 11 | element.setAttribute('readonly', '') 12 | 13 | element.style.contain = 'strict' 14 | element.style.position = 'absolute' 15 | element.style.left = '-9999px' 16 | element.style.fontSize = '12pt' // Prevent zooming on iOS 17 | 18 | const selection = document.getSelection() 19 | let originalRange: false | Range = false 20 | if (selection!.rangeCount > 0) { 21 | originalRange = selection!.getRangeAt(0) 22 | } 23 | 24 | target.append(element) 25 | element.select() 26 | 27 | // Explicit selection workaround for iOS 28 | element.selectionStart = 0 29 | element.selectionEnd = input.length 30 | 31 | let isSuccess = false 32 | try { 33 | isSuccess = document.execCommand('copy') 34 | } catch {} 35 | 36 | element.remove() 37 | 38 | if (originalRange) { 39 | selection!.removeAllRanges() 40 | selection!.addRange(originalRange) 41 | } 42 | 43 | // Get the focus back on the previously focused element, if any 44 | if (previouslyFocusedElement) { 45 | // @ts-expect-error 46 | previouslyFocusedElement.focus() 47 | } 48 | 49 | return isSuccess 50 | } 51 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | darkMode: 'media', // or 'media' or 'class' 3 | content: ['./src/**/*.{js,jsx,ts,tsx}'], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx", 22 | }, 23 | "include": [ 24 | "src" 25 | ], 26 | } --------------------------------------------------------------------------------