Icons

Tree-shakeable SVG icons based on Lucide.

import { ... } from '@corndev/ui-icons'

HTML

<span class="corn-icon"><!-- inline <svg> --></span>

Classes

Class
`.corn-icon`

Vanilla JS

Required for behaviour — adds injects the SVG markup.

import { createIcon } from '@corndev/ui-icons';
import '@corndev/ui/theme';

const nodes = document.querySelector('#target');
const instance = createIcon(nodes, { /* options */ });

Options

Option	Type	Default	Description
`size`	`number`	`24`	Width and height in pixels.
`strokeWidth`	`number`	`2`	SVG stroke width.
`title`	`string`	`undefined`	Accessible label. When set, the icon is exposed as `role="img"`; otherwise it is hidden from assistive tech (`aria-hidden`).
`className`	`string`	`undefined`	Extra class names appended to `corn-icon`.

React

Icon — from @corndev/ui-icons-react.

The React <Icon> receives the SVG shapes as children (JSX elements) rather than as a Lucide-style nodes array.

The props are the same as the options above, plus className.

Corn UI icons are based on Lucide (ISC licensed). Each icon is an individual, tree-shakeable export — you only bundle the icons you import. Color is inherited from the surrounding text via currentColor, so icons match their context automatically.

React

npm install @corndev/ui-icons-react

import { SearchIcon, HeartIcon } from '@corndev/ui-icons-react';

<SearchIcon />
<SearchIcon size={32} strokeWidth={1.5} />
<HeartIcon title="Favorite" />            {/* accessible: role="img" + <title> */}
<SearchIcon style={{ color: 'var(--corn-primary)' }} />

Vanilla JS

npm install @corndev/ui-icons

Each create{Name}Icon(options) returns an <svg> element:

import { createSearchIcon } from '@corndev/ui-icons';

document.querySelector('#box').appendChild(createSearchIcon({ size: 20 }));

Naming

Icons use their Lucide name in PascalCase with an Icon suffix:

Lucide name	React	Vanilla
`search`	`SearchIcon`	`createSearchIcon`
`chevron-right`	`ChevronRightIcon`	`createChevronRightIcon`
`trash-2`	`Trash2Icon`	`createTrash2Icon`