react-simple-badges
React badges for your Profile and Projects.
Find a complete list of over 1400 badges in badges.md
Install
npm i react-simple-badges
yarn 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. A github action is run every 24 hours checking if the list has been updated and will automatically update the Badge component with the new badges and be published to npm with a new version number. Any props passed to the component get passed along to the img element in it so things like style can be applied easily.
Usage
import React from 'react'
import Badge from 'react-simple-badges'
const App = () => {
return (
<>
<Badge name="node.js" style={{width: 200}} logoColor="#eb4034" />
<Badge name="YouTube Gaming" label="Youtube" />
<Badge name="Valve" label="Steamy Boi" style={{padding: 10}} />
<Badge name="Tesla" backgroundColor="#32a853" />
</>
)
}
export default App
Example project on stackblitz.com
props for <Badge />
<Badge name="" />
required : string
The name of the badge your trying to use eg. "Instagram"
<Badge label="" />
optional : string
A custom string to replace the word on the badge eg. "Insta"
<Badge logoColor="" />
optional : string : hex color
Replaces the color of the logo that default to white eg. "#ffb900"
<Badge backgroundColor="" />
optional : string : hex color
Replaces the color of the background of the badge eg. "#00e1ff"