badgewind

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

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

<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