{"id":16225775,"url":"https://github.com/agmmnn/badgewind","last_synced_at":"2025-03-19T12:31:13.732Z","repository":{"id":184020517,"uuid":"671158716","full_name":"agmmnn/badgewind","owner":"agmmnn","description":"▱ Tailwind-styled markdown SVG badges, basically shields.io but customizable with Tailwind.","archived":false,"fork":false,"pushed_at":"2023-12-31T10:42:17.000Z","size":40852,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T07:11:23.065Z","etag":null,"topics":["badges","markdown","satori","shields","shieldsio","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://badgewind.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agmmnn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-07-26T17:11:09.000Z","updated_at":"2025-02-19T16:45:44.000Z","dependencies_parsed_at":"2024-10-27T20:44:23.641Z","dependency_job_id":null,"html_url":"https://github.com/agmmnn/badgewind","commit_stats":null,"previous_names":["agmmnn/badgewind"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agmmnn%2Fbadgewind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agmmnn%2Fbadgewind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agmmnn%2Fbadgewind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agmmnn%2Fbadgewind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agmmnn","download_url":"https://codeload.github.com/agmmnn/badgewind/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244426602,"owners_count":20450995,"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","markdown","satori","shields","shieldsio","tailwind","tailwindcss"],"created_at":"2024-10-10T12:46:21.893Z","updated_at":"2025-03-19T12:31:08.719Z","avatar_url":"https://github.com/agmmnn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"https://badgewind.vercel.app/api/Badge-Wind?badgeStyle=bg-|border|text-(27px)|border-cyan-500|rounded-full|text-2xl\u0026leftStyle=bg-|text-rose-50|p-2|rounded-l-xl|h-full|text-2xl\u0026rightStyle=bg-|rounded-r-xl|italic|h-full|text-2xl|px-3|border-l|border-cyan-500\u0026icon=ri:windy-line\u0026iconStyle=text-cyan-500|h-11|w-11\"\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://badgewind.vercel.app/api/Badge-Wind?badgeStyle=bg-|border|text-(27px)|border-cyan-500|rounded-full|text-2xl\u0026leftStyle=bg-|text-rose-50|p-2|rounded-l-xl|h-full|text-2xl\u0026rightStyle=bg-|rounded-r-xl|italic|h-full|text-2xl|px-3|border-l|border-cyan-500\u0026icon=ri:windy-line\u0026iconStyle=text-cyan-500|h-11|w-11\"\u003e\n  \u003cimg alt=\"badgewind\" src=\"https://badgewind.vercel.app/api/Badge-Wind?badgeStyle=bg-|text-rose-900|border|text-(27px)|border-cyan-500|rounded-full|text-2xl\u0026leftStyle=bg-|p-2|rounded-l-xl|h-full|text-2xl\u0026rightStyle=bg-|rounded-r-xl|italic|h-full|text-2xl|px-3|border-l|border-cyan-500\u0026icon=ri:windy-line\u0026iconStyle=text-cyan-500|h-11|w-11\"\u003e\n\u003c/picture\u003e\n\u003c/a\u003e\n\nTailwind-styled markdown SVG badges, basically shields.io but customizable with Tailwind. _BadgeWind utilizes the [vercel/satori](https://github.com/vercel/satori) library under the hood._\n\n[![Github](https://badgewind.vercel.app/api/BadgeWind?icon=simple-icons:github)](https://github.com/agmmnn/badgewind) [![Tailwind](https://badgewind.vercel.app/api/-?icon=simple-icons:tailwindcss)](https://tailwindcss.com/) [![Triangle Company](https://badgewind.vercel.app/api/Triangle-Company?badgeStyle=rounded-none|border-2|p-0\u0026leftStyle=rounded-none|bg-zinc-100|text-zinc-800|mr-0\u0026rightStyle=rounded-none|bg-zinc-800|text-white\u0026icon=mdi:triangle\u0026textShadow=false)](https://vercel.com/home) [![Spotify](\u003chttps://badgewind.vercel.app/api/-Spotify?badgeStyle=bg-|border-0|rounded-full\u0026leftStyle=rounded-l-full|mr-1\u0026rightStyle=rounded-r-full|rounded-l|bg-(@1ed760)|text-slate-700\u0026icon=simple-icons:spotify\u0026iconStyle=text-(@1ed760)\u003e)](https://open.spotify.com/user/agmmnn) [![Discord](\u003chttps://badgewind.vercel.app/api/-Midjourney?badgeStyle=border-0|rounded-full\u0026leftStyle=rounded-full|mr-1|bg-(@525dea)\u0026rightStyle=rounded-r-full|rounded-l|bg-|pl-0|pr-2\u0026icon=simple-icons:discord\u0026iconStyle=text-white\u003e)](https://discord.com/invite/midjourney)\n![](https://github.com/agmmnn/badgewind/assets/16024979/68e63feb-a872-4bac-bbc2-52f49faca96d)\n\n\u003c/div\u003e\n\n\u003e \u003ca href=\"https://github.com/jaredh159/tailwind-react-native-classnames/blob/master/supported-utilities.md\"\u003e\u003cpicture\u003e\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://badgewind.vercel.app/api/Supported-Tailwind_Utilities?badgeStyle=border-2|border-slate-600|text-white|rounded-none|bg-\u0026leftStyle=bg-\u0026rightStyle=bg-|border-l|border-slate-600\u0026icon=devicon:tailwindcss\u0026textShadow=false\"\u003e\u003cimg alt=\"supported tailwind utilities\" src=\"https://badgewind.vercel.app/api/Supported-Tailwind_Utilities?badgeStyle=border-2|border-slate-800|text-black|rounded-none|bg-\u0026leftStyle=bg-\u0026rightStyle=bg-|border-l|border-slate-800\u0026icon=devicon:tailwindcss\u0026textShadow=false\"\u003e\u003c/picture\u003e\u003c/a\u003e\n\n| Feature             | [Shields.io](https://shields.io/)                                                                                                         | [BadgeWind](https://badgewind.vercel.app/)                                                                                                                                                                        |\n| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Styling             | Predefined styles                                                                                                                         | Extensive customization options using [Tailwind CSS](https://tailwindcss.com/) ([Supported Tailwind utilities](https://github.com/jaredh159/tailwind-react-native-classnames/blob/master/supported-utilities.md)) |\n| Icon Support        | Only [Simple Icons](https://simpleicons.org/)                                                                                             | Support for all [Iconify](https://icon-sets.iconify.design/) icon sets (including [Simple Icons](https://icon-sets.iconify.design/simple-icons/))                                                                 |\n| Flexibility         | Limited layout options                                                                                                                    | More layout flexibility (such as size, only icon)                                                                                                                                                                 |\n| ~~Service Support~~ | _Supports many services (e.g., [PyPI](https://shields.io/badges/py-pi-downloads), [npm](https://shields.io/badges/npm) download numbers)_ | _Does not support services yet_                                                                                                                                                                                   |\n\n## \u003cpicture\u003e\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://badgewind.vercel.app/api/Usage?badgeStyle=boder-slate-800|text-white|rounded-|bg-\u0026leftStyle=bg-|text-2xl\u0026rightStyle=bg-|border-l|border-slate-800\u0026icon=memory:bow-arrow\u0026textShadow=false\u0026iconStyle=h-6|w-6\"\u003e\u003cimg alt=\"supported tailwind utilities\" src=\"https://badgewind.vercel.app/api/Usage?badgeStyle=boder-slate-800|text-black|rounded-|bg-\u0026leftStyle=bg-|text-2xl\u0026rightStyle=bg-|border-l|border-slate-800\u0026icon=memory:bow-arrow\u0026textShadow=false\u0026iconStyle=h-6|w-6\"\u003e\u003c/picture\u003e\n\n### Simple Usage\n\n[![Github](https://badgewind.vercel.app/api/Github-agmmnn?icon=simple-icons:github)](https://github.com/agmmnn)\n\n```\nhttps://badgewind.vercel.app/api/Github-agmmnn?icon=simple-icons:github\n```\n\n### Variables\n\n- \\[left-right\\]: Text for the left and right sides of the badge (Text). _e.g: Triangle-Company_.\n- `badgeStyle`: Main badge div (Tailwind style).\n- `leftStyle`: Style for the left div of the badge (Tailwind style).\n- `rightStyle`: Style for the right div of the badge (Tailwind style).\n- `icon`: Icon to show (Iconify icon code).\n- `iconStyle`: Style for the icon SVG (Tailwind style).\n- `textShadow`: Enable or disable text shadow (boolean, default true).\n\n### Special Symbols\n\nYou can use [URL encoding](https://www.urlencoder.org/) or simply avoid encoding by using **special symbols**.\n\n**For Text:**\n\nSame as shields.io\n\n- Underscore `_` : Space ` `\n- Double underscore `__` : Underscore `_`\n- Double dash `--` : Dash `-`\n\n**For Style:**\n\n- `|`: Space ` `\n- `(` `)`: `[` `]`\n- `@`: `#`\n\n```\n# these are identical:\nh-5|bg-(@fff)|text-(16px)\nh-5 bg-[#fff] text-[16px]\n```\n\n## \u003cpicture\u003e\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://badgewind.vercel.app/api/Examples?badgeStyle=boder-slate-800|text-white|rounded-|bg-\u0026leftStyle=bg-|text-2xl\u0026rightStyle=bg-|border-l|border-slate-800\u0026icon=memory:map\u0026textShadow=false\u0026iconStyle=h-6|w-6\"\u003e\u003cimg alt=\"supported tailwind utilities\" src=\"https://badgewind.vercel.app/api/Examples?badgeStyle=boder-slate-800|text-black|rounded-|bg-\u0026leftStyle=bg-|text-2xl\u0026rightStyle=bg-|border-l|border-slate-800\u0026icon=memory:map\u0026textShadow=false\u0026iconStyle=h-6|w-6\"\u003e\u003c/picture\u003e\n\n![](https://badgewind.vercel.app/api/Github-agmmnn?icon=simple-icons:github) ![](https://badgewind.vercel.app/api/Github-agmmnn) ![](https://badgewind.vercel.app/api/agmmnn?badgeStyle=text-lime-200\u0026icon=simple-icons:github) ![](https://badgewind.vercel.app/api/-?icon=simple-icons:github) ![](https://badgewind.vercel.app/api/-?leftStyle=rounded-full\u0026icon=simple-icons:github\u0026iconStyle=text-sky-200|h-5|w-5|m-1)\n\n![](\u003chttps://badgewind.vercel.app/api/-Reactive?badgeStyle=rounded-full\u0026leftStyle=rounded-full\u0026rightStyle=bg-transparent|font-black|w-16\u0026icon=simple-icons:react\u0026iconStyle=text-(@61dafb)|w-5|h-5\u003e)\n![](https://badgewind.vercel.app/api/Project-v1.2.3?badgeStyle=p-0|rounded-full\u0026leftStyle=rounded-l-full|mr-0\u0026rightStyle=rounded-r-full|bg-zinc-800|text-white\u0026icon=mdi:triangle\u0026iconStyle=text-white) [![](https://badgewind.vercel.app/api/Triangle-Company?badgeStyle=rounded-none|border-2|p-0\u0026leftStyle=rounded-none|bg-zinc-100|text-zinc-800|mr-0\u0026rightStyle=rounded-none|bg-zinc-800|text-white\u0026icon=mdi:triangle)](https://vercel.com/home)\n\n[![](\u003chttps://badgewind.vercel.app/api/Spotify-agmmnn?badgeStyle=bg-slate-700|p-1|border-0|rounded-full\u0026leftStyle=rounded-l-full|mr-1\u0026rightStyle=rounded-r-full|bg-(@1ed760)|text-slate-700\u0026icon=simple-icons:spotify\u0026iconStyle=text-(@1ed760)\u003e)](\u003chttps://badgewind.vercel.app/api/Spotify-agmmnn?badgeStyle=bg-slate-700|p-1|border-0|rounded-full\u0026leftStyle=rounded-l-full|mr-1\u0026rightStyle=rounded-r-full|bg-white|text-slate-700\u0026icon=simple-icons:spotify\u0026iconStyle=text-(@1ed760)\u003e)\n\n- Spotify-agmmnn\n- `badgeStyle`=bg-slate-700|p-1|border-0|rounded-full\n- `leftStyle`=rounded-l-full|mr-1\n- `rightStyle`=rounded-r-full|bg-(@1ed760)|text-slate-700\n- `icon`=simple-icons:spotify\n- `iconStyle`=text-(@1ed760)\n\n```\nhttps://badgewind.vercel.app/api/Spotify-agmmnn?badgeStyle=bg-slate-700|p-1|border-0|rounded-full\u0026leftStyle=rounded-l-full|mr-1\u0026rightStyle=rounded-r-full|bg-(@1ed760)|text-slate-700\u0026icon=simple-icons:spotify\u0026iconStyle=text-(@1ed760)\n```\n\n![](https://badgewind.vercel.app/api/Project-Version_v1.2.3?badgeStyle=p-0|rounded-full\u0026leftStyle=rounded-l-full|mr-0\u0026rightStyle=rounded-r-full|bg-purple-800|text-white\u0026icon=feather:code\u0026iconStyle=text-white|bg-purple-800|rounded-full)\n\n- Project-Version_v1.2.3\n- `badgeStyle`=p-0|rounded-full\n- `leftStyle`=rounded-l-full|mr-0\n- `rightStyle`=rounded-r-full|bg-purple-800|text-white\n- `icon`=feather:code\n- `iconStyle`=text-white|bg-purple-800|rounded-full\n\n```\nhttps://badgewind.vercel.app/api/Project-Version_v1.2.3?badgeStyle=p-0|rounded-full\u0026leftStyle=rounded-l-full|mr-0\u0026rightStyle=rounded-r-full|bg-purple-800|text-white\u0026icon=feather:code\u0026iconStyle=text-white|bg-purple-800|rounded-full\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eBadge component\u003c/summary\u003e\n\n```tsx\n\u003cdiv\n  tw={twMerge(\n    \"flex bg-[#314361] text-white border-b-2 border-slate-700 rounded-md items-center leading-3 text-[11px]\",\n    badgeStyle\n  )}\n\u003e\n  \u003cdiv\n    tw={twMerge(\n      \"flex bg-[#445d87] rounded-l-md p-1 justify-center items-center text-[11px]\",\n      left \u0026\u0026 right ? \"rounded-l-md\" : \"rounded-md\",\n      leftStyle\n    )}\n  \u003e\n    {icon \u0026\u0026 (\n      \u003cIconElement\n        icon={icon}\n        iconStyle={twMerge(\n          \"h-3.5 w-3.5\",\n          left || right ? \"mr-1\" : \"\",\n          left === \"\" \u0026\u0026 \"mr-0\",\n          iconStyle \u0026\u0026 iconStyle\n        )}\n      /\u003e\n    )}\n    {left \u0026\u0026 \u003cdiv style={textStyle}\u003e{left}\u003c/div\u003e}\n  \u003c/div\u003e\n  {right \u0026\u0026 (\n    \u003cdiv\n      tw={twMerge(\n        \"flex bg-[#2f86cf] p-1 items-center leading-3 text-[11px]\",\n        left \u0026\u0026 right ? \"rounded-r-md\" : \"\",\n        rightStyle\n      )}\n    \u003e\n      \u003cdiv style={textStyle}\u003e{right}\u003c/div\u003e\n    \u003c/div\u003e\n  )}\n\u003c/div\u003e\n```\n\n\u003c/details\u003e\n\n## Future Enhancements\n\n- Expanded Font Support.\n- More Ready-Made styles, flat style etc.\n- Icon Insertion in Text, like \"my [icon=simple-icons:github] link\".\n- Gradient support ([twrnc](https://github.com/jaredh159/tailwind-react-native-classnames/blob/master/supported-utilities.md) does not support gradients but maybe can be implemented manually).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagmmnn%2Fbadgewind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagmmnn%2Fbadgewind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagmmnn%2Fbadgewind/lists"}