{"_id":"@aryankarma/simple-avatar-generator","_rev":"2-84bb3e1966efbafa184139cc8cc5b695","name":"@aryankarma/simple-avatar-generator","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aryankarma/simple-avatar-generator","version":"1.0.0","keywords":["avatar","generator","react","svg","email","profile","picture"],"author":"","license":"MIT","_id":"@aryankarma/simple-avatar-generator@1.0.0","maintainers":[{"name":"aryankarma","email":"aryankarma29@gmail.com"}],"dist":{"shasum":"dde616dd7861d4d1928dad0c4f4327267e60157f","tarball":"https://registry.npmjs.org/@aryankarma/simple-avatar-generator/-/simple-avatar-generator-1.0.0.tgz","fileCount":6,"integrity":"sha512-6QBlyTKCXQAjAth9IjX8H8d8mdQGpeFEnIsB/OODP8xNXfjAOVC3yqzwhRj48GwwWOhHeNhCKynFt48Qbh/P5w==","signatures":[{"sig":"MEQCIBwuJE+PdJHmMJ/CpDJ+6j6TcNi6Ro/oDaYsIENNdJa/AiBvx4OJrHBSukjw4LSq1PW/Esh0V3Ws04gVTUFD9C1ksQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14457},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"gitHead":"92e69f79f61c6c042d79ebca0065d96a05e5410c","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","build":"tsup src/index.ts --format cjs,esm --dts","prepublishOnly":"npm run build"},"_npmUser":{"name":"aryankarma","email":"aryankarma29@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.8.2","description":"A React component for generating deterministic SVG avatars from email addresses","directories":{},"_nodeVersion":"20.19.4","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^19.2.1","typescript":"^5.9.3","@types/react":"^19.2.7"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/simple-avatar-generator_1.0.0_1765298739326_0.011877641263596805","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aryankarma/simple-avatar-generator","version":"1.0.1","description":"A React component for generating deterministic SVG avatars from email addresses","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"publishConfig":{"access":"public"},"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","dev":"tsup src/index.ts --format cjs,esm --dts --watch","prepublishOnly":"npm run build"},"keywords":["avatar","generator","react","svg","email","profile","picture"],"author":{"name":"Aryan Karma","email":"aryankarma.pro"},"license":"MIT","homepage":"https://avatar.aryankarma.pro","repository":{"type":"git","url":"git+https://github.com/aryankarma/avatar.git"},"bugs":{"url":"https://github.com/aryankarma/avatar/issues"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/react":"^19.2.7","react":"^19.2.1","tsup":"^8.5.1","typescript":"^5.9.3"},"_id":"@aryankarma/simple-avatar-generator@1.0.1","gitHead":"51097c0142d4d1079d8e626c13d562da9bc169f1","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-TeVblcJ708exiiCgRxjZZPRJwirqoQ69JI6O3e3wmqJnAvcMs8YAEeeQxyXPNO9v1VopufWva4aBjyc2hYuISw==","shasum":"2b86e86c7b2910e18cc89b7d4ecd6a4037142ce6","tarball":"https://registry.npmjs.org/@aryankarma/simple-avatar-generator/-/simple-avatar-generator-1.0.1.tgz","fileCount":6,"unpackedSize":14652,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGkwjHZwAqHO7b1ub9sfCnHDc8r2a16LuaQMbVxvGLFzAiEAlxrbf0gIrusCIwUBQETpNE+NDtUHfoRwF23vcvAmxpw="}]},"_npmUser":{"name":"aryankarma","email":"aryankarma29@gmail.com"},"directories":{},"maintainers":[{"name":"aryankarma","email":"aryankarma29@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/simple-avatar-generator_1.0.1_1765300978772_0.9737928210007594"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-09T16:45:39.231Z","modified":"2025-12-09T17:22:59.150Z","1.0.0":"2025-12-09T16:45:39.481Z","1.0.1":"2025-12-09T17:22:58.908Z"},"license":"MIT","keywords":["avatar","generator","react","svg","email","profile","picture"],"repository":{"type":"git","url":"git+https://github.com/aryankarma/avatar.git"},"description":"A React component for generating deterministic SVG avatars from email addresses","maintainers":[{"name":"aryankarma","email":"aryankarma29@gmail.com"}],"readme":"# @avatar-generator/react\n\nA lightweight React component for generating deterministic SVG avatars from email addresses. Each email address produces a unique, consistent avatar with initials and colorful patterns.\n\n## Features\n\n- 🎨 **Deterministic Generation** - Same email always produces the same avatar\n- ⚡ **Zero Dependencies** - No external dependencies (except React)\n- 📦 **Lightweight** - Small bundle size\n- 🎯 **TypeScript Support** - Full TypeScript definitions included\n- 🎨 **Customizable** - Control size, styling, and more\n- 🌈 **Unique Patterns** - Colorful patterns and initials for each email\n\n## Installation\n\n```bash\nnpm install @avatar-generator/react\n# or\nyarn add @avatar-generator/react\n# or\npnpm add @avatar-generator/react\n```\n\n## Usage\n\n### Basic Usage\n\n```tsx\nimport { Avatar } from '@avatar-generator/react';\n\nfunction App() {\n  return <Avatar email=\"john.doe@example.com\" />;\n}\n```\n\n### With Custom Size\n\n```tsx\nimport { Avatar } from '@avatar-generator/react';\n\nfunction App() {\n  return (\n    <Avatar \n      email=\"john.doe@example.com\" \n      size={150} \n    />\n  );\n}\n```\n\n### With Custom Styling\n\n```tsx\nimport { Avatar } from '@avatar-generator/react';\n\nfunction App() {\n  return (\n    <Avatar \n      email=\"john.doe@example.com\" \n      size={100}\n      className=\"rounded-full border-2 border-gray-300\"\n      style={{ margin: '10px' }}\n    />\n  );\n}\n```\n\n### In a User Profile Component\n\n```tsx\nimport { Avatar } from '@avatar-generator/react';\n\nfunction UserProfile({ user }) {\n  return (\n    <div className=\"user-profile\">\n      <Avatar \n        email={user.email} \n        size={80}\n        className=\"rounded-full\"\n        alt={`${user.name}'s avatar`}\n      />\n      <h2>{user.name}</h2>\n    </div>\n  );\n}\n```\n\n## API Reference\n\n### Avatar Component Props\n\n| Prop      | Type            | Default | Description                                    |\n|-----------|-----------------|---------|------------------------------------------------|\n| `email`   | `string`        | -       | Email address to generate avatar for (required) |\n| `size`    | `number`        | `200`   | Avatar size in pixels (50-1000)                |\n| `className` | `string`      | `''`    | CSS class name to apply to the img element    |\n| `style`   | `CSSProperties` | `{}`    | Inline styles to apply to the img element     |\n| `alt`     | `string`        | Auto    | Alt text for the image (defaults to email)     |\n\n### Utility Functions\n\nYou can also use the utility functions directly:\n\n```tsx\nimport { generateAvatarSVG, generateAvatarDataURL } from '@avatar-generator/react';\n\n// Get SVG string\nconst svg = generateAvatarSVG('user@example.com', 200);\n\n// Get data URL\nconst dataUrl = generateAvatarDataURL('user@example.com', 200);\n```\n\n## Examples\n\n### Circular Avatar\n\n```tsx\n<Avatar \n  email=\"user@example.com\" \n  size={100}\n  className=\"rounded-full\"\n/>\n```\n\n### Avatar List\n\n```tsx\nconst users = [\n  { email: 'alice@example.com', name: 'Alice' },\n  { email: 'bob@example.com', name: 'Bob' },\n  { email: 'charlie@example.com', name: 'Charlie' },\n];\n\nfunction UserList() {\n  return (\n    <div>\n      {users.map(user => (\n        <div key={user.email} className=\"user-item\">\n          <Avatar email={user.email} size={50} className=\"rounded-full\" />\n          <span>{user.name}</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n```\n\n## How It Works\n\n1. **Email Processing**: The email address is hashed to generate a deterministic seed\n2. **Color Generation**: Colors are derived from the hash using HSL color space\n3. **Initials Extraction**: Initials are extracted from the email (e.g., \"john.doe@example.com\" → \"JD\")\n4. **Pattern Generation**: Decorative patterns (circles, squares, or lines) are added based on the hash\n5. **SVG Generation**: All elements are combined into a scalable SVG image\n\n## Browser Support\n\nWorks in all modern browsers that support:\n- React 16.8+\n- SVG images\n- Data URLs\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n","readmeFilename":"README.md","homepage":"https://avatar.aryankarma.pro","author":{"name":"Aryan Karma","email":"aryankarma.pro"},"bugs":{"url":"https://github.com/aryankarma/avatar/issues"}}