{"id":13515056,"url":"https://github.com/github/g-emoji-element","last_synced_at":"2025-04-08T08:11:36.402Z","repository":{"id":37550080,"uuid":"142336689","full_name":"github/g-emoji-element","owner":"github","description":"Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.","archived":false,"fork":false,"pushed_at":"2025-03-05T22:18:24.000Z","size":1579,"stargazers_count":138,"open_issues_count":6,"forks_count":21,"subscribers_count":248,"default_branch":"main","last_synced_at":"2025-04-01T05:32:25.784Z","etag":null,"topics":["custom-elements","emoji","web-components"],"latest_commit_sha":null,"homepage":"https://github.github.io/g-emoji-element/examples/","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/github.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-25T18:07:35.000Z","updated_at":"2025-03-13T13:44:23.000Z","dependencies_parsed_at":"2024-03-18T12:31:20.849Z","dependency_job_id":"0aa8e68f-6c1a-4b41-8107-3e52e8d4d324","html_url":"https://github.com/github/g-emoji-element","commit_stats":{"total_commits":124,"total_committers":7,"mean_commits":"17.714285714285715","dds":0.717741935483871,"last_synced_commit":"266bd5ca9db8f83f3483a53305985c845c569af1"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fg-emoji-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fg-emoji-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fg-emoji-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fg-emoji-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/github","download_url":"https://codeload.github.com/github/g-emoji-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247801154,"owners_count":20998338,"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":["custom-elements","emoji","web-components"],"created_at":"2024-08-01T05:01:05.775Z","updated_at":"2025-04-08T08:11:36.375Z","avatar_url":"https://github.com/github.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# \u0026lt;g-emoji\u0026gt; element\n\nBackports native emoji characters to browsers that don't support them by replacing the characters with fallback images.\n\n## Installation\n\n```\n$ npm install @github/g-emoji-element\n```\n\n## Usage\n\n```js\nimport '@github/g-emoji-element'\n```\n\n```html\n\u003cg-emoji fallback-src=\"t-rex.png\" alias=\"T-Rex\"\u003e🦖\u003c/g-emoji\u003e\n```\n\nIf a browser supports emoji, nothing happens. If a browser does not support emoji, a fallback image tag is created:\n\n```html\n\u003cg-emoji fallback-src=\"t-rex.png\" alias=\"T-Rex\"\u003e\n  \u003cimg class=\"emoji\" alt=\"T-Rex\" height=\"20\" width=\"20\" src=\"t-rex.png\"\u003e\n\u003c/g-emoji\u003e\n```\n\n### Skin tones\n\nThe `tone` attribute renders the emoji with a [skin tone modifier][scale] between 1-5. Use\n0 to display the default tone.\n\n[scale]: https://en.wikipedia.org/wiki/Fitzpatrick_scale\n\n```html\n\u003cg-emoji tone=\"0\"\u003e👋\u003c/g-emoji\u003e\n\u003cg-emoji tone=\"1\"\u003e👋🏻\u003c/g-emoji\u003e\n\u003cg-emoji tone=\"2\"\u003e👋🏼\u003c/g-emoji\u003e\n\u003cg-emoji tone=\"3\"\u003e👋🏽\u003c/g-emoji\u003e\n\u003cg-emoji tone=\"4\"\u003e👋🏾\u003c/g-emoji\u003e\n\u003cg-emoji tone=\"5\"\u003e👋🏿\u003c/g-emoji\u003e\n```\n\n```js\n\u003e const emoji = document.createElement('g-emoji')\n\u003e emoji.textContent = '👋'\n\u003e emoji.tone = '5'\n\u003e document.body.append(emoji)\n\u003e emoji.textContent\n\"👋🏿\"\n```\n\nThe `tone` attribute accepts a space separated list of skin tone modifiers to apply\nto each base emoji in a sequence. Some platforms will display these sequences\nas a single glyph while others will render each emoji in the sequence.\n\n```html\n\u003cg-emoji tone=\"4 5\"\u003e🧑🏾\u003c200d\u003e🤝\u003c200d\u003e🧑🏿\u003c/g-emoji\u003e\n```\n\n## Browser support\n\nBrowsers without native [custom element support][support] require a [polyfill][].\n\n- Chrome\n- Firefox\n- Safari\n- Microsoft Edge\n\n[support]: https://caniuse.com/#feat=custom-elementsv1\n[polyfill]: https://github.com/webcomponents/custom-elements\n\n## Development\n\n```\nnpm install\nnpm test\n```\n\n## License\n\nDistributed under the MIT license. See LICENSE for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithub%2Fg-emoji-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgithub%2Fg-emoji-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithub%2Fg-emoji-element/lists"}