lachlanjc / supercons

A friendly, open source React iconset

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

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

2. Install dependencies.

$ yarn

4. Run docs locally.

yarn run dev

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

supercons's Issues

Could not find a declaration file for module 'supercons'.

Could not find a declaration file for module 'supercons'. 'node_modules/supercons/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/supercons if it exists or add a new declaration (.d.ts) file containing declare module 'supercons';

can use with vue js?

Cound not find a declaration file for module 'supercons'

My vscode warning that but i can still use Icon

(Docs): Cannot search for icons that include an uppercase character

Hi, thanks for making this - I love these cute little icons!

When using the docs site on my phone, (which auto capitalizes the first letter) I noticed that I am always returned 0 search results. I know this is a minor issue, and I'd be happy to send in a PR, but I think anyone using a phone that auto-capitalizes the first letter might get frustrated. Here's an example:

This functions as expected:

This does not: