Tailwind-styled markdown SVG badges, basically shields.io but customizable with Tailwind. BadgeWind utilizes the vercel/satori library under the hood.

Feature	Shields.io	BadgeWind
Styling	Predefined styles	Extensive customization options using Tailwind CSS (Supported Tailwind utilities)
Icon Support	Only Simple Icons	Support for all Iconify icon sets (including Simple Icons)
Flexibility	Limited layout options	More layout flexibility (such as size, only icon)
Service Support	Supports many services (e.g., PyPI, npm download numbers)	Does not support services yet

Simple Usage

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 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]

• 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

<div
  tw={twMerge(
    "flex bg-[#314361] text-white border-b-2 border-slate-700 rounded-md items-center leading-3 text-[11px]",
    badgeStyle
  )}
>
  <div
    tw={twMerge(
      "flex bg-[#445d87] rounded-l-md p-1 justify-center items-center text-[11px]",
      left && right ? "rounded-l-md" : "rounded-md",
      leftStyle
    )}
  >
    {icon && (
      <IconElement
        icon={icon}
        iconStyle={twMerge(
          "h-3.5 w-3.5",
          left || right ? "mr-1" : "",
          left === "" && "mr-0",
          iconStyle && iconStyle
        )}
      />
    )}
    {left && <div style={textStyle}>{left}</div>}
  </div>
  {right && (
    <div
      tw={twMerge(
        "flex bg-[#2f86cf] p-1 items-center leading-3 text-[11px]",
        left && right ? "rounded-r-md" : "",
        rightStyle
      )}
    >
      <div style={textStyle}>{right}</div>
    </div>
  )}
</div>

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 does not support gradients but maybe can be implemented manually).

License

MIT