{"id":13518897,"url":"https://github.com/MatthewCallis/avatar","last_synced_at":"2025-03-31T11:30:52.555Z","repository":{"id":24791002,"uuid":"28204794","full_name":"MatthewCallis/avatar","owner":"MatthewCallis","description":"Library for showing Gravatars or generating user avatars.","archived":false,"fork":false,"pushed_at":"2023-05-17T04:08:57.000Z","size":1356,"stargazers_count":212,"open_issues_count":7,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T05:05:21.977Z","etag":null,"topics":["avatar","gravatar","initials","javascript"],"latest_commit_sha":null,"homepage":"https://matthewcallis.github.io/avatar/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MatthewCallis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-12-18T22:43:06.000Z","updated_at":"2025-01-09T11:08:57.000Z","dependencies_parsed_at":"2024-01-13T19:50:41.094Z","dependency_job_id":null,"html_url":"https://github.com/MatthewCallis/avatar","commit_stats":{"total_commits":104,"total_committers":4,"mean_commits":26.0,"dds":0.04807692307692313,"last_synced_commit":"55261f1729bea35eac135a532a97492ef08350cc"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatthewCallis%2Favatar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatthewCallis%2Favatar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatthewCallis%2Favatar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatthewCallis%2Favatar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MatthewCallis","download_url":"https://codeload.github.com/MatthewCallis/avatar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246140581,"owners_count":20729802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avatar","gravatar","initials","javascript"],"created_at":"2024-08-01T05:01:50.537Z","updated_at":"2025-03-31T11:30:52.533Z","avatar_url":"https://github.com/MatthewCallis.png","language":"JavaScript","readme":"[![view on npm](https://img.shields.io/npm/v/avatar-initials.svg)](https://www.npmjs.org/package/avatar-initials)\n[![npm module downloads](https://img.shields.io/npm/dt/avatar-initials.svg)](https://www.npmjs.org/package/avatar-initials)\n[![Build Status](https://travis-ci.com/MatthewCallis/avatar.svg?branch=master)](https://travis-ci.com/MatthewCallis/avatar)\n[![Coverage Status](https://coveralls.io/repos/github/MatthewCallis/avatar/badge.svg?branch=master)](https://coveralls.io/github/MatthewCallis/avatar?branch=master)\n[![Tree-Shaking Support](https://badgen.net/bundlephobia/tree-shaking/avatar-initials)](https://bundlephobia.com/result?p=avatar-initials)\n[![Dependency Count](https://badgen.net/bundlephobia/dependency-count/avatar-initials)](https://bundlephobia.com/result?p=avatar-initials)\n[![Minified + GZip](https://badgen.net/bundlephobia/minzip/avatar-initials)](https://bundlephobia.com/result?p=avatar-initials)\n[![Minified](https://badgen.net/bundlephobia/min/avatar-initials)](https://bundlephobia.com/result?p=avatar-initials)\n\n# [Avatar](http://matthewcallis.github.io/avatar/)\n\nAvatar is a JavaScript library \u0026 React component for showing [Gravatars](https://en.gravatar.com/) or generating user avatars.\n\n## Examples\n\nThere are several examples [on the website](http://matthewcallis.github.io/avatar/).\n\n```js\nimport Avatar from 'avatar-initials';\n// or\nconst Avatar = require('avatar-initials');\n\n// Add an avatar to an \u003cimg\u003e\nconst avatar = Avatar.from(document.getElementById('avatar'), {\n  'useGravatar': false,\n  'initials': 'MC',\n});\n\n// If you just want the URL / string:\nconst github_avatar_url = Avatar.githubAvatar({\n  id: '12345'\n});\n\nconst gravatar_url_from_email = Avatar.gravatarUrl({\n  email: 'test@test.test'\n});\n\nconst gravatar_url_from_hash = Avatar.gravatarUrl({\n  hash: '12929016fffb0b3af98bc440acf0bfe2'\n});\n\nconst initial_png = Avatar.initialAvatar({\n  initials: 'MC',\n  initial_fg: '#888888',\n  initial_bg: '#f4f6f7',\n  initial_size: 0, // Defaults to height / 2\n  initial_weight: 100,\n  initial_font_family: \"'Lato', 'Lato-Regular', 'Helvetica Neue'\",\n});\n```\n\nThis example will render an avatar with my initials \"MC\" as the image.\n\n![Avatar Example](https://raw.githubusercontent.com/MatthewCallis/avatar/master/example.png)\n\nA simple React example:\n\n```jsx\nimport { AvatarComponent } from 'avatar-initials';\n\nexport default function Example() {\n  // ...\n  return (\n    \u003cdiv className={`w-full flex self-center items-center justify-between relative ${classes}`}\u003e\n      \u003cbutton type=\"button\" onClick={() =\u003e setShowMenu(true)} title=\"Open Menu\"\u003e\n        \u003cAvatarComponent\n          classes=\"rounded-full\"\n          useGravatar={false}\n          size={44}\n          primarySource={currentUser.Avatar}\n          color=\"#000000\"\n          background=\"#f1f1f1\"\n          fontSize={16}\n          fontWeight={400}\n          offsetY={24}\n          initials={`${currentUser.FirstName[0]}${currentUser.LastName[0]}`}\n        /\u003e\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Options\n\nAvatar is highly customizable and most options are self explanatory:\n\n```js\n{\n  primarySource: '',           // A source image to be used by default before attempting any other sources.\n  fallbackImage: '',           // URL or Data URI used when no initials are provided and not using Gravatars.\n  size: 80,                    // Size in pixels, fallback for hidden images and Gravatar\n  setSourceCallback: () =\u003e {}, // Callback called when image source is set (useful to cache avatar sources provided by third parties such as Gravatar)\n\n  // Initial Avatars Specific\n  initials: '',          // Initials to be used\n  color: '#888888',      // Text Color\n  background: '#f4f6f7', // Background Color\n  fontSize: 0,           // Text Size in pixels\n  fontWeight: 100,       // Font weight (numeric value for light, bold, etc.)\n  fontFamily: \"'Lato', 'Lato-Regular', 'Helvetica Neue'\",\n  offsetX: undefined,    // Text X position in pixels, defaults to: width / 2\n  offsetY: undefined,    // Text Y position in pixels, defaults to: height / 2\n  width: undefined,      // The width of the output image, size is used it not provided\n  height: undefined,     // The height of the output image, size is used if not provided\n\n  // Gravatar Specific\n  useGravatar: true,            // Allow Gravatars as source\n  useGravatarFallback: false,   // Use Gravatars fallback, not fallbackImage\n  hash: '',                     // Precalculated MD5 string of an email address\n  email: '',                    // Email used for the Gravatar\n  fallback: 'mm',               // Fallback Type\n  rating: 'x',                  // Gravatar Rating\n  forcedefault: false,          // Force Gravatar Defaults\n\n  // GitHub Specific\n  githubId: null,  // GitHub User ID.\n}\n```\n\n## Installation\n\n```shell\nnpm install --save avatar-initials\n```\n\nor copy the minified build from `browser/`\n\n```html\n\u003cscript src=\"browser/avatar.js\"\u003e\u003c/script\u003e\n```\n\nThe browser build is built with the following `@babel/preset-env` targets:\n\n```json\n{\n  \"android\": \"109\",\n  \"chrome\": \"109\",\n  \"edge\": \"109\",\n  \"firefox\": \"109\",\n  \"ios\": \"16.2\",\n  \"opera\": \"92\",\n  \"safari\": \"16.2\",\n  \"samsung\": \"19\"\n}\n```\n\n### jQuery Wrapper for Avatar\n\n```javascript\nif (typeof jQuery !== 'undefined') {\n  jQuery.fn.avatar = function avatar(options) {\n    return this.each(() =\u003e {\n      if (!jQuery.data(this, 'plugin_avatar')) {\n        jQuery.data(this, 'plugin_avatar', new Avatar(this, options));\n      }\n    });\n  };\n}\n```\n\n## Migrating to v6\n\nThe settings have changed keys and some new logic was introduced, the logic should not interefere but the keys will need to be updated:\n\n```md\n  initial_fg            =\u003e color\n  initial_bg            =\u003e background\n  initial_size          =\u003e fontSize\n  initial_weight        =\u003e fontWeight\n  initial_font_family   =\u003e fontFamily\n  allowGravatarFallback =\u003e useGravatarFallback\n  github_id             =\u003e github_id\n```\n\n## Thanks\n\nPretty styles and design support kindly provided by [Andrew Crocker](https://twitter.com/andrewcrocker).\n[Sun Knudsen](https://github.com/sunknudsen) for providing [a PR](https://github.com/MatthewCallis/avatar/pull/20) with `setSourceCallback`.\n\n### License\n\nAvatar is [MIT licensed](./LICENSE).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMatthewCallis%2Favatar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMatthewCallis%2Favatar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMatthewCallis%2Favatar/lists"}