Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/agmmnn/badgewind
▱ Tailwind-styled markdown SVG badges, basically shields.io but customizable with Tailwind.
https://github.com/agmmnn/badgewind
badges markdown satori shields shieldsio tailwind tailwindcss
Last synced: 2 months ago
JSON representation
▱ Tailwind-styled markdown SVG badges, basically shields.io but customizable with Tailwind.
- Host: GitHub
- URL: https://github.com/agmmnn/badgewind
- Owner: agmmnn
- Created: 2023-07-26T17:11:09.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-31T10:42:17.000Z (12 months ago)
- Last Synced: 2024-10-11T12:45:49.783Z (3 months ago)
- Topics: badges, markdown, satori, shields, shieldsio, tailwind, tailwindcss
- Language: TypeScript
- Homepage: https://badgewind.vercel.app
- Size: 39 MB
- Stars: 18
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
|border-cyan-500|rounded-full|text-2xl&leftStyle=bg-|p-2|rounded-l-xl|h-full|text-2xl&rightStyle=bg-|rounded-r-xl|italic|h-full|text-2xl|px-3|border-l|border-cyan-500&icon=ri:windy-line&iconStyle=text-cyan-500|h-11|w-11)
Tailwind-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._
[](https://github.com/agmmnn/badgewind) [](https://tailwindcss.com/) [](https://vercel.com/home) [![Spotify]()](https://open.spotify.com/user/agmmnn) [![Discord]()](https://discord.com/invite/midjourney)
> 
| Feature | [Shields.io](https://shields.io/) | [BadgeWind](https://badgewind.vercel.app/) |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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)) |
| 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/)) |
| Flexibility | Limited layout options | More layout flexibility (such as size, only icon) |
| ~~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_ |
## 
### Simple Usage
[](https://github.com/agmmnn)
```
https://badgewind.vercel.app/api/Github-agmmnn?icon=simple-icons:github
```
### Variables
- \[left-right\]: Text for the left and right sides of the badge (Text). _e.g: Triangle-Company_.
- `badgeStyle`: Main badge div (Tailwind style).
- `leftStyle`: Style for the left div of the badge (Tailwind style).
- `rightStyle`: Style for the right div of the badge (Tailwind style).
- `icon`: Icon to show (Iconify icon code).
- `iconStyle`: Style for the icon SVG (Tailwind style).
- `textShadow`: Enable or disable text shadow (boolean, default true).
### Special Symbols
You can use [URL encoding](https://www.urlencoder.org/) or simply avoid encoding by using **special symbols**.
**For Text:**
Same as shields.io
- Underscore `_` : Space ` `
- Double underscore `__` : Underscore `_`
- Double dash `--` : Dash `-`
**For Style:**
- `|`: Space ` `
- `(` `)`: `[` `]`
- `@`: `#`
```
# these are identical:
h-5|bg-(@fff)|text-(16px)
h-5 bg-[#fff] text-[16px]
```
## 
    
![]()
 [](https://vercel.com/home)
[![]()]()
- Spotify-agmmnn
- `badgeStyle`=bg-slate-700|p-1|border-0|rounded-full
- `leftStyle`=rounded-l-full|mr-1
- `rightStyle`=rounded-r-full|bg-(@1ed760)|text-slate-700
- `icon`=simple-icons:spotify
- `iconStyle`=text-(@1ed760)
```
https://badgewind.vercel.app/api/Spotify-agmmnn?badgeStyle=bg-slate-700|p-1|border-0|rounded-full&leftStyle=rounded-l-full|mr-1&rightStyle=rounded-r-full|bg-(@1ed760)|text-slate-700&icon=simple-icons:spotify&iconStyle=text-(@1ed760)
```
- Project-Version_v1.2.3
- `badgeStyle`=p-0|rounded-full
- `leftStyle`=rounded-l-full|mr-0
- `rightStyle`=rounded-r-full|bg-purple-800|text-white
- `icon`=feather:code
- `iconStyle`=text-white|bg-purple-800|rounded-full
```
https://badgewind.vercel.app/api/Project-Version_v1.2.3?badgeStyle=p-0|rounded-full&leftStyle=rounded-l-full|mr-0&rightStyle=rounded-r-full|bg-purple-800|text-white&icon=feather:code&iconStyle=text-white|bg-purple-800|rounded-full
```
Badge component
```tsx
{icon && (
)}
{left && {left}}
{right && (
{right}
)}
```
## Future Enhancements
- Expanded Font Support.
- More Ready-Made styles, flat style etc.
- Icon Insertion in Text, like "my [icon=simple-icons:github] link".
- 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).
## License
MIT