[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81259":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":15,"stars30d":16,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":13,"starSnapshotCount":13,"syncStatus":15,"lastSyncTime":28,"discoverSource":29},81259,"quick-avatar","easychen\u002Fquick-avatar","easychen","Deterministic PNG avatars for your projects. Pick a seed, get an avatar — no API, no server, no network required.","http:\u002F\u002Fqa.ft07.com\u002F",null,"TypeScript",54,0,1,2,4,41.4,"MIT License",false,"main",true,[23,24],"avatar","npm","2026-06-12 04:01:32","# quick-avatar\n\n\u003Cimg width=\"998\" height=\"655\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F68bb7762-1f92-4fe9-9b9f-aba4e7182afd\" \u002F>\n\n\nDeterministic PNG avatars for your projects. Pick a seed, get an avatar — no API, no server, no network required.\n\nInspired by [DiceBear](https:\u002F\u002Fdicebear.com), but uses hand-crafted PNG illustrations instead of generated SVGs.\n\n---\n\n## Installation\n\n```bash\nnpm install quick-avatar\n```\n\n---\n\n## Usage\n\n### Basic (SPA \u002F Browser)\n\n```ts\nimport { createAvatar, doteye } from 'quick-avatar';\n\nconst avatar = createAvatar(doteye, { seed: 'user@example.com' });\n\n\u002F\u002F Async: lazy-loads only the matching image chunk (~50 KB)\nconst src = await avatar.toDataUri();\n\u002F\u002F → \"data:image\u002Fpng;base64,...\"\n```\n\nSame seed always returns the same avatar.\n\n### React\n\n```tsx\nimport { useEffect, useState } from 'react';\nimport { createAvatar, doteye } from 'quick-avatar';\n\nfunction Avatar({ userId }: { userId: string }) {\n  const [src, setSrc] = useState('');\n\n  useEffect(() => {\n    createAvatar(doteye, { seed: userId }).toDataUri().then(setSrc);\n  }, [userId]);\n\n  return \u003Cimg src={src} width={64} height={64} alt=\"avatar\" \u002F>;\n}\n```\n\n### CDN (zero bundle size)\n\nSkip bundling entirely — link directly to the image file via jsDelivr:\n\n```ts\nconst avatar = createAvatar(doteye, { seed: 'user@example.com' });\n\n\u002F\u002F Default: jsDelivr pointing to the published npm package\navatar.toUrl();\n\u002F\u002F → \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fquick-avatar\u002Fdist\u002Fsets\u002Fdoteye\u002Fimages\u002F39.png\"\n\n\u002F\u002F Custom CDN or self-hosted\navatar.toUrl('https:\u002F\u002Fassets.example.com');\n\u002F\u002F → \"https:\u002F\u002Fassets.example.com\u002Fdist\u002Fsets\u002Fdoteye\u002Fimages\u002F39.png\"\n```\n\n```tsx\n\u003Cimg src={createAvatar(doteye, { seed: userId }).toUrl()} alt=\"avatar\" \u002F>\n```\n\n### Node.js \u002F SSR\n\n```ts\nimport { createAvatar, doteye } from 'quick-avatar';\n\nconst avatar = createAvatar(doteye, { seed: 'user@example.com' });\n\n\u002F\u002F Read as Buffer (e.g. for HTTP response or sharp processing)\nconst buffer = avatar.toBuffer();\nres.setHeader('Content-Type', 'image\u002Fpng');\nres.end(buffer);\n\n\u002F\u002F Or get the absolute file path\nconst filePath = avatar.toFilePath();\n\u002F\u002F → \"\u002Fpath\u002Fto\u002Fnode_modules\u002Fquick-avatar\u002Fdist\u002Fsets\u002Fdoteye\u002Fimages\u002F39.png\"\n```\n\n---\n\n## API\n\n### `createAvatar(collection, options)`\n\n| Parameter | Type | Description |\n|-----------|------|-------------|\n| `collection` | `AvatarCollection` | An imported style set, e.g. `doteye` |\n| `options.seed` | `string` | Any string — user ID, email, username, etc. |\n| `options.cdnBase` | `string` (optional) | Default CDN base URL used by `toUrl()` |\n\nReturns an `AvatarResult`:\n\n| Method \u002F Property | Returns | Notes |\n|-------------------|---------|-------|\n| `toDataUri()` | `Promise\u003Cstring>` | Lazy-loads the image as a base64 data URI |\n| `toUrl(cdnBase?)` | `string` | CDN URL, synchronous, zero bundle cost |\n| `toBuffer()` | `Buffer` | Node.js only — reads the PNG file synchronously |\n| `toFilePath()` | `string` | Node.js only — absolute path to the PNG file |\n| `index` | `number` | Which avatar was selected (0-based) |\n| `set` | `string` | Name of the collection, e.g. `\"doteye\"` |\n\n---\n\n## Available Style Sets\n\n| Import | Name | Count | Background |\n|--------|------|-------|------------|\n| `doteye` | Doteye | 64 | White |\n| `doteyeAlpha` | Doteye Alpha | 64 | Transparent |\n| `doteyePaper` | Doteye Paper | 64 | Transparent (B&W) |\n| `ol` | OL | 72 | White |\n\n```ts\nimport { createAvatar, doteye, doteyeAlpha, doteyePaper, ol } from 'quick-avatar';\n\n\u002F\u002F Solid white background\nconst avatar = createAvatar(doteye, { seed: 'user@example.com' });\n\n\u002F\u002F Transparent background — compose over any color\nconst avatarAlpha = createAvatar(doteyeAlpha, { seed: 'user@example.com' });\n\n\u002F\u002F Black & white, transparent background\nconst avatarPaper = createAvatar(doteyePaper, { seed: 'user@example.com' });\n```\n\n---\n\n## Bundle Size\n\n`quick-avatar` uses code splitting so your bundle only ever includes the image chunks you actually render:\n\n- Core logic (`index.mjs`): **~5 KB**\n- Per-image chunk: **~40–100 KB**, loaded on demand\n- CDN mode: **0 KB** — images are fetched at runtime, never bundled\n\n---\n\n## Adding a New Style Set\n\n### 1. Add PNG files\n\nPlace your images in `avatars\u002F\u003CsetName>\u002F`. File names can be anything — they will be sorted numerically and assigned 0-based indices.\n\n```\navatars\u002F\n  pixel\u002F\n    pixel-avatar-1.png\n    pixel-avatar-2.png\n    ...\n```\n\n### 2. Run the generate script\n\n```bash\nnpm run generate pixel\n# or regenerate all sets at once:\nnpm run generate\n```\n\nThis will:\n- Convert each PNG to a base64 module in `src\u002Fsets\u002Fpixel\u002Fimages\u002F*.ts`\n- Write a `src\u002Fsets\u002Fpixel\u002Fmeta.ts` with the count and set name\n- Copy the original PNG files to `dist\u002Fsets\u002Fpixel\u002Fimages\u002F` for CDN use\n\n### 3. Create the collection file\n\nCreate `src\u002Fsets\u002Fpixel\u002Findex.ts`:\n\n```ts\nimport { resolve } from 'path';\nimport { fileURLToPath } from 'url';\nimport type { AvatarCollection } from '..\u002F..\u002Fcore\u002Ftypes.js';\nimport { count, name } from '.\u002Fmeta.js';\n\nconst __dirname = fileURLToPath(new URL('.', import.meta.url));\n\nexport const pixel: AvatarCollection = {\n  name,\n  count,\n\n  async getImage(index: number): Promise\u003Cstring> {\n    const mod = await import(`.\u002Fimages\u002F${index}.ts`);\n    return mod.default as string;\n  },\n\n  getFilePath(index: number): string {\n    return resolve(__dirname, 'sets', name, 'images', `${index}.png`);\n  },\n};\n```\n\n### 4. Export from the main entry\n\nAdd one line to `src\u002Findex.ts`:\n\n```ts\nexport { createAvatar } from '.\u002Fcore\u002Fcreate-avatar.js';\nexport type { AvatarCollection, AvatarOptions, AvatarResult } from '.\u002Fcore\u002Ftypes.js';\n\nexport { doteye } from '.\u002Fsets\u002Fdoteye\u002Findex.js';\nexport { pixel } from '.\u002Fsets\u002Fpixel\u002Findex.js';  \u002F\u002F ← add this\n```\n\n### 5. Build\n\n```bash\nnpm run build\n```\n\nUsers can now import the new set:\n\n```ts\nimport { createAvatar, pixel } from 'quick-avatar';\n```\n\n---\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Regenerate all sets from source PNGs\nnpm run generate\n\n# Build (clean → generate → compile)\nnpm run build\n```\n\n---\n\n## License\n\nMIT\n","quick-avatar 是一个用于生成确定性PNG头像的项目，适用于各类应用。其核心功能是通过选择一个种子字符串（如用户ID或邮箱），即可生成对应的头像，整个过程无需API、服务器或网络支持。该项目采用TypeScript编写，灵感来源于DiceBear，但使用的是手绘PNG插图而非SVG生成。它适合需要在无网络环境下快速生成一致头像的应用场景，例如单页应用、React组件、Node.js服务端渲染等，并且提供了多种集成方式，包括直接从CDN加载以实现零捆绑大小。MIT许可证下开放源代码，易于安装和使用。","2026-06-11 04:04:05","CREATED_QUERY"]