ThemeIcon
A coloured surface holding an icon.
import { ... } from '@corndev/ui' HTML
No JavaScript required — these classes are the whole component.
<span class="corn-theme-icon" data-level="primary" data-variant="filled" data-size="md" data-radius="md"></span>Classes
| Class |
|---|
.corn-theme-icon |
Attributes
| Attribute | Values |
|---|---|
data-size | sm|md|lg |
data-radius | sm|md|full |
data-level | primary|secondary|success|warning|danger |
data-variant | light|outline|bare |
Vanilla JS
Optional. createThemeIcon only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.
import { createThemeIcon } from '@corndev/ui';
import '@corndev/ui/theme';
const el = document.querySelector('#target');
const instance = createThemeIcon(el, { /* options */ });Options
| Option | Type | Default | Description |
|---|---|---|---|
level | 'primary'|'secondary'|'success'|'warning'|'danger' | 'primary' | Colour, from Button’s ladder. |
variant | 'filled'|'light'|'outline'|'bare' | 'filled' | How much emphasis. bare is the sized slot alone — no fill, no border, the text’s colour — for lining glyphs up in a column; empty, it holds the column as a spacer. It takes no level. |
size | 'sm'|'md'|'lg' | 'md' | Box size. |
radius | 'sm'|'md'|'full' | 'md' | Corner rounding. |
React
ThemeIcon — from @corndev/ui-react.
The props are the same as the options above, plus className.
What turns a bare glyph into something that reads as part of the interface: a sized, coloured box with the icon centred in it.
It is a box, not a control. No hover, no focus ring, no cursor. An icon that
does something is a Button with variant="icon" — something that looks
pressable and is not is worse than a plain glyph.
React usage
import { ThemeIcon } from '@corndev/ui-react';
import { CheckIcon } from '@corndev/ui-icons-react';
import '@corndev/ui/theme';
<ThemeIcon level="success"><CheckIcon /></ThemeIcon>The icon inherits color, so an SVG drawn with currentColor needs nothing.
Variants
<ThemeIcon level="danger" variant="filled">…</ThemeIcon>
<ThemeIcon level="danger" variant="light">…</ThemeIcon>
<ThemeIcon level="danger" variant="outline">…</ThemeIcon>light is the one that works in a dense list — the hue moves to the ink and the
surface stays quiet, so a column of them does not turn into a column of blocks.
level is Button’s ladder, so one colour vocabulary covers both. Sizes are
sm · md · lg, and radius takes full for a circle.
Vanilla
<span class="corn-theme-icon" data-level="success" data-variant="light" data-size="md" data-radius="md">
<svg>…</svg>
</span>