Neologistic Paraphasic Mumbling
    Have ideas to improve npm?Join in the discussion! »

    react-simple-badges
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    react-simple-badges

    React badges for your Profile and Projects.

    Find a complete list of over 1400 badges in badges.md

    NPM

    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. shields.io doesn't store the primary accent colour of the icon though, simple icons does in a json file. but downloading the whole file (~40kb gziped) is bad for the loading times of a website. so the json file is stored in a firebase function which the component sends a request too with the name of the badge your trying to display. A github action is run every 24 hours checking if the list has been updated and will automatically update the firebase function with the new badges and be published to firebase. 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

    rendered jsx

    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"

    Keywords

    none

    Install

    npm i react-simple-badges

    DownloadsWeekly Downloads

    9

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    27.9 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar