Icon
An SVG icon with a defined size.
Pass an SVG component to tag, for example a Heroicons icon. size is the size in pixels: 12, 14, 16, 18 (default), 20, 22, 24, 26, or 32. The former s, m, and l map to 16, 20, and 24.
Live example
Example controls
Usage
import { CheckIcon } from '@heroicons/react/24/outline';
import { Icon } from '@prosazhin/pbcomponents';
<Icon
tag={CheckIcon}
size={20}
/>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
tag | SvgTypecheck · search · user | SVG icon component. | — |
size | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 3212 · 14 · 16 · 18 · 20 · 22 · 24 · 26 · 32 | Icon size in pixels. The former s, m and l are 16, 20 and 24. | 18 |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.