/icons

Hack Club’s iconset, a superset of spectrum-icons

Primary LanguageTypeScriptBSD 3-Clause "New" or "Revised" LicenseBSD-3-Clause

@hackclub/icons

Hack Club’s icons are a superset of Spectrum’s incredible collection (also published as spectrum-icons). Designed for use with our Design System.

See them all

Usage

With React

npm i @hackclub/icons
import React from 'react'
import Icon from '@hackclub/icons'

export default () => (
  <div style={{ color: 'cyan' }}>
    <Icon glyph="clubs" size={128} />
    <Icon glyph="bank-circle" size={64} />
    <Icon glyph="leaders" size={32} />
  </div>
)

With the API

https://icons.hackclub.com/api/icons/:color/:glyph

  • :glyph - A glyph from icons.hackclub.com.
  • :color - Any valid HTML color or Hack Club Theme color prefixed with hackclub-. Replace # with 0x when using a hexadecimal color.

All responses are SVGs with the MIME type image/svg+xml. You can optionally include the .svg file extension.

Examples:

<img src="https://icons.hackclub.com/api/icons/red/clubs">
<img src="https://icons.hackclub.com/api/icons/hackclub-green/battery-bolt">
<img src="https://icons.hackclub.com/api/icons/0xc78ad4/sam.svg">

Development Setup

  1. Clone & enter the repo.
$ git clone https://github.com/hackclub/icons.git
$ cd icons
  1. Install dependencies.
$ yarn
  1. Build library.
yarn run prepare
  1. Run docs locally.
yarn run dev