formidable-oss-badges

Badges for Formidable OSS

Usage no npm install needed!

<script type="module">
  import formidableOssBadges from 'https://cdn.skypack.dev/formidable-oss-badges';
</script>

README

Formidable OSS Badges

Badges for Formidable Open Source Projects

Contents

Using the package

  • yarn add formidable-oss-badges or npm install formidable-oss-badges
  • In your react app, import { FeaturedBadge, IconBadge, ProjectBadge } from "formidable-oss-badges";
  • Use the <ProjectBadge />, <FeaturedBadge />, and/or <IconBadge></IconBadge> component as directed below

ProjectBadge

ProjectBadge props

The <ProjectBadge /> component takes five, optional, props:

Prop Type Description Example
color String (hex/RGB) Base color of the badge "#FF00FF"
abbreviation String Short representation of the name. Large font. Typically one uppercase letter, one lowercase. "Em"
description String Title or brief description. Smaller text, displayed in all-caps. "Enzyme Matchers"
className String Class to apply directly to the SVG "project-badge"

It is recommended to at least include the color, description, and abbreviation props.

ProjectBadge children

Will accept any svg child (we recommend to use an <image/> with an embedded png, svg or lossless image format of your choice. See example 5).

Presence of a child will cause the component to ignore any abbreviation prop.

You will need to position the child yourself.

e.g:

<image x="14%" y="20%" />

FeaturedBadge

To use a Featured Formidable Badge, you only need to pass in a single prop, name, that matches one of the available badges listed below.

Available Badges

See featuredLogos for the latest available lineup.

  • renature
  • spectacle
  • urql
  • victory

IconBadge

IconBadge props

<IconBadge /> only accepts a color prop. Prop | Type | Description | Example | | ------------ | ---------------- | -------------------------------------------------------------------------------------------- | ------------------- | | color | String (hex/RGB) | Base color of the badge | "#FF00FF" |

IconBadge children

Like ProjectBadge, will accept any svg child (we recommend to use an <image/> with an embedded png, svg or lossless image format of your choice. See example 4).

This badge should always be given a child.

You will need to position the child yourself.

Examples (with Images)

ProjectBadge Usage

Example 1:

<ProjectBadge color="#89E" abbreviation="No" description="Number" />

Example 2:

<ProjectBadge color="#E48055" abbreviation="Em" description="Enzyme Matchers" />

Example 3:

<ProjectBadge />

Example 5:

ProjectBadge with svg child:

<ProjectBadge abbreviation="R" description="React" color="#90dafa">
  <image
    x="14%"
    y="20%"
    width="50%"
    href="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png"
  />
</ProjectBadge>

IconBadge Usage

Example 4:

<IconBadge color="#89E">
  <image
    x="14%"
    y="20%"
    width="50%"
    href="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png"
  />
</IconBadge>

FeaturedBadge Usage

Example 6:

<FeaturedBadge name="victory">

Example Badges

1 2 3
Number Enzyme Matchers Blank
4 5 6
ProjectBadge with png IconBadge with png Featured badge

Try the components locally

To try out the badge components locally:

  1. git clone this repo
  2. cd formidable-oss-badges
  3. yarn && yarn build && yarn link or npm i && npm run build && npm link
  4. cd examples
  5. yarn link "formidable-oss-badges" or npm link "formidable-oss-badges"
  6. yarn && yarn start or npm i && npm start to run a basic React app prepopulated with basic examples

You can then edit examples/src/App.js, either by returning the components directly, or by adding an object with the props you would like to trial in the dataForExamples array.

Note that this array is currently just used for passing props into <ProjectBadge /> and not for passing children or for rendering <IconBadge />.