Skip to content

lachlanjc/supercons

Repository files navigation

Supercons

A friendly set of open source React icons.

Preview & search the iconset

Massive credit to @superbryntendo for the original set of icons & aesthetic inspiration.

Predecessor projects: spectrum-icons, @hackclub/icons

Banner with fun styling of Supercons

Usage

yarn add supercons
# npm i supercons
import React from 'react'
import Icon from 'supercons'

export default () => (
  <div style={{ color: 'magenta' }}>
    <Icon glyph="like" size={128} />
    <Icon glyph="cloud" size={32} />
  </div>
)

Built with/supports TypeScript.

Props

Prop Type Default Details
glyph String, required like See docs
size Number or string 32 Sets width & height
as React component svg Must render svg tag

You can also pass any other props. Remember to make your icons accessible with aria-label or title, use aria-hidden if they’re purely decorative, etc.

Development setup

  1. Clone & enter the repo.
$ git clone https://github.com/lachlanjc/supercons.git
$ cd supercons
  1. Install dependencies.
$ yarn
  1. Run docs locally.
yarn run dev
  1. After making changes to icons, build the library.
yarn run prepare

To-do list

  • Drop PropTypes for TypeScript (thanks @anirudhb!)
  • Use Microbundle for build
  • Allow tree-shaking by programatically generating a component for each icon
  • Forward refs (with proper TypeScript support)
  • Add more icons