Formidable OSS Badges

Badges for Formidable Open Source Projects

Contents

• Using the package
• ProjectBadge
  • Component props
  • Component children
  • Usage
• FeaturedBadge
  • Available badges
  • Usage
• IconBadge
  • Component props
  • Component children
  • Usage
• Examples
• Try component locally

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
• nuka

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

4	5	6

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 />.

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.