Icon
Draws any icon at Seed's sizes.
import { Icon } from "@flinbu/seed";Sizes
import { Icon } from "@flinbu/seed";
import { Search, Orbit } from "lucide-react";
<Icon as={Search} size="xs" />
<Icon as={Search} size="sm" />
<Icon as={Search} size="md" />
<Icon as={Orbit} size="lg" label="Pluto" className="text-icon-accent-primary" />Use it for
- Lucide icons (lucide-react), or your own SVG paths.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ComponentType | none | The icon component, e.g. Search from lucide-react. |
size | 'xs' | 'sm' | 'md' | 'lg' | number | 'sm' | 12, 16, 20 or 24 px. |
label | string | none | Accessible name; makes the icon meaningful. |
strokeWidth | number | 2 | Line weight. |
Accessibility
- Decorative unless you give it a label.