{"id":15735289,"url":"https://github.com/nwylynko/react-simple-badges","last_synced_at":"2025-10-05T05:19:16.677Z","repository":{"id":37257020,"uuid":"287887483","full_name":"NWylynko/react-simple-badges","owner":"NWylynko","description":"React badges for your Profile and Projects.","archived":false,"fork":false,"pushed_at":"2024-07-08T13:24:56.000Z","size":2497,"stargazers_count":38,"open_issues_count":1,"forks_count":23,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-22T02:05:07.287Z","etag":null,"topics":["badges","components","icons","library","profile","props","react","react-badges","reactjs","shields","shieldsio","simple","simpleicons"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-simple-badges","language":"TypeScript","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/NWylynko.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-16T06:28:54.000Z","updated_at":"2024-07-08T13:25:01.000Z","dependencies_parsed_at":"2024-01-23T01:31:38.317Z","dependency_job_id":"1872d02c-6e79-42bf-8ac4-f704a7844d66","html_url":"https://github.com/NWylynko/react-simple-badges","commit_stats":{"total_commits":323,"total_committers":3,"mean_commits":"107.66666666666667","dds":0.4613003095975232,"last_synced_commit":"6e34b2a445a292fded484404dced6499bff59bf6"},"previous_names":[],"tags_count":299,"template":false,"template_full_name":null,"purl":"pkg:github/NWylynko/react-simple-badges","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NWylynko%2Freact-simple-badges","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NWylynko%2Freact-simple-badges/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NWylynko%2Freact-simple-badges/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NWylynko%2Freact-simple-badges/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NWylynko","download_url":"https://codeload.github.com/NWylynko/react-simple-badges/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NWylynko%2Freact-simple-badges/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262724089,"owners_count":23354175,"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":["badges","components","icons","library","profile","props","react","react-badges","reactjs","shields","shieldsio","simple","simpleicons"],"created_at":"2024-10-04T01:11:54.029Z","updated_at":"2025-10-05T05:19:11.660Z","avatar_url":"https://github.com/NWylynko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-simple-badges\n\n\u003cimg src=\"https://img.shields.io/badge/react%20-%2320232a.svg?\u0026style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB\"/\u003e\u003cimg src=\"https://img.shields.io/badge/typescript%20-%23007ACC.svg?\u0026style=for-the-badge\u0026logo=typescript\u0026logoColor=white\"/\u003e\n\nReact badges for your Profile and Projects.\n\n[Find a complete list of over 1400 badges in badges.md](https://github.com/NWylynko/react-simple-badges/blob/master/badges.md)\n\n[![NPM](https://nodei.co/npm/react-simple-badges.png)](https://www.npmjs.com/package/react-simple-badges)\n\n## Install\n\n```bash\npnpm add react-simple-badges\n```\n\n```bash\nnpm i react-simple-badges\n```\n\n```bash\nyarn add react-simple-badges\n```\n\n```bash\nbun add react-simple-badges\n```\n\n## What is this Component?\n\nA Component that renders an image of a badge from shields.io using simpleicons.org list of icons. Every 24 hours a Github action is run to check for new icons. If their is a new one a new npm module version is released with it. This module is intended to be used as a react server component. Using the new async component. This means it can import the large icons list to get the background color you need but without increasing the end users page load time. But this does mean you need a framework that supports server components and react 18.2.0 or later.\n\n## Usage\n\n``` jsx\nimport { Badge } from \"react-simple-badges\"\n\nexport default async function HomePage() {\n  return (\n    \u003c\u003e\n      \u003cBadge name=\"Node.js\" style={{width: 200}} logoColor=\"#eb4034\" /\u003e\n      \u003cBadge name=\"YouTube Gaming\" label=\"Youtube\" /\u003e\n      \u003cBadge name=\"Valve\" label=\"Value Please fix\" style={{padding: 10}} /\u003e\n      \u003cBadge name=\"Tesla\" backgroundColor=\"#32a853\" /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n[Example project on stackblitz.com](https://stackblitz.com/edit/nextjs-mvwvlz?file=app%2Fpage.tsx,app%2Flayout.tsx)\n\n## props for `\u003cBadge /\u003e`\n\n### `\u003cBadge name=\"\" /\u003e` required : string\nThe name of the badge your trying to use\neg. \"Instagram\"\n### `\u003cBadge label=\"\" /\u003e` optional : string\nA custom string to replace the word on the badge\neg. \"Insta\"\n### `\u003cBadge logoColor=\"\" /\u003e` optional : string : hex color\nReplaces the color of the logo that default to white\neg. \"#ffb900\"\n### `\u003cBadge backgroundColor=\"\" /\u003e` optional : string : hex color\nReplaces the color of the background of the badge\neg. \"#00e1ff\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnwylynko%2Freact-simple-badges","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnwylynko%2Freact-simple-badges","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnwylynko%2Freact-simple-badges/lists"}