https://github.com/nwylynko/react-simple-badges
React badges for your Profile and Projects.
https://github.com/nwylynko/react-simple-badges
badges components icons library profile props react react-badges reactjs shields shieldsio simple simpleicons
Last synced: 12 days ago
JSON representation
React badges for your Profile and Projects.
- Host: GitHub
- URL: https://github.com/nwylynko/react-simple-badges
- Owner: NWylynko
- License: mit
- Created: 2020-08-16T06:28:54.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-07-08T13:24:56.000Z (over 1 year ago)
- Last Synced: 2025-06-22T02:05:07.287Z (4 months ago)
- Topics: badges, components, icons, library, profile, props, react, react-badges, reactjs, shields, shieldsio, simple, simpleicons
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-simple-badges
- Size: 2.38 MB
- Stars: 38
- Watchers: 1
- Forks: 23
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-simple-badges
React badges for your Profile and Projects.
[Find a complete list of over 1400 badges in badges.md](https://github.com/NWylynko/react-simple-badges/blob/master/badges.md)
[](https://www.npmjs.com/package/react-simple-badges)
## Install
```bash
pnpm add react-simple-badges
```
```bash
npm i react-simple-badges
```
```bash
yarn add react-simple-badges
```
```bash
bun add react-simple-badges
```
## What is this Component?
A 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.
## Usage
``` jsx
import { Badge } from "react-simple-badges"
export default async function HomePage() {
return (
<>
>
)
}
```
[Example project on stackblitz.com](https://stackblitz.com/edit/nextjs-mvwvlz?file=app%2Fpage.tsx,app%2Flayout.tsx)
## props for ``
### `` required : string
The name of the badge your trying to use
eg. "Instagram"
### `` optional : string
A custom string to replace the word on the badge
eg. "Insta"
### `` optional : string : hex color
Replaces the color of the logo that default to white
eg. "#ffb900"
### `` optional : string : hex color
Replaces the color of the background of the badge
eg. "#00e1ff"