Icon
All 497 glyphs from icons.hackclub.com. Icons take the current text color. Only the few glyphs the components use are bundled; anything else loads from icons.hackclub.com as a CSS mask. To embed every glyph (for offline use or a strict CSP), import "@hackclub/components/icons".
<hc-icon glyph="github"></hc-icon>
<hc-icon glyph="slack" style="color: var(--hc-purple)"></hc-icon>
<hc-icon glyph="code" style="color: var(--hc-blue)"></hc-icon>
<hc-icon glyph="rep" style="color: var(--hc-red)" size="48"></hc-icon>
<hc-icon glyph="flag" style="color: var(--hc-orange)" size="48"></hc-icon>
<hc-icon glyph="emoji" size="64" label="Smiley"></hc-icon>registerGlyphs({ name: "<path …/>" }) to add your own glyphs, and set HcIcon.cdn to load unregistered glyphs from somewhere else.API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
glyph | GlyphName | "like" | Icon name from icons.hackclub.com |
size | number | 32 | Width and height in px |
label | string | Accessible name; omit for decorative icons |
CSS parts
| Name | Description |
|---|---|
svg | The <svg> (or mask <span>) |