Vizel API / react/src / VizelIcon
Function: VizelIcon()
ts
function VizelIcon(__namedParameters): Element;Defined in: packages/react/src/components/VizelIcon.tsx:43
Icon component that renders Iconify icons based on semantic icon names. Uses Lucide icons by default, but can be customized via:
- customIcons prop (highest priority)
- VizelIconProvider context
- Default Lucide icons (fallback)
Parameters
| Parameter | Type |
|---|---|
__namedParameters | VizelIconProps |
Returns
Element
Example
tsx
// Using default Lucide icons
<VizelIcon name="heading1" />
// With custom icon override (prop takes precedence)
<VizelIcon name="heading1" customIcons={{ heading1: "mdi:format-header-1" }} />
// With VizelIconProvider context
<VizelIconProvider icons={{ heading1: "ph:text-h-one" }}>
<VizelIcon name="heading1" /> {/* Uses Phosphor icon */}
</VizelIconProvider>
// With size and color
<VizelIcon name="check" width={24} height={24} color="green" />