Documentation
Wrapper component for consistent icon sizing and styling. Works with both Huge Icons and Hero Icons.
import { Home01Icon } from "@/lib/icons"
import { IconWrapper } from "@/components/common/icon-wrapper"
;<IconWrapper icon={Home01Icon} size="lg" className="text-primary" />
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ComponentType | IconSvgObject | - | Icon component or Huge Icon object (required) |
size | "xs" | "sm" | "md" | "lg" | "xl" | number | "md" | Icon size |
className | string | - | Additional CSS classes |
xs: 16pxsm: 20pxmd: 24px (default)lg: 32pxxl: 40pxOr use custom number: size={28}
import { IconWrapper } from "@/components/common/icon-wrapper";
import { Home01Icon, SearchIcon } from "@/lib/icons";
<IconWrapper icon={Home01Icon} size="lg" className="text-blue-500" />
<IconWrapper icon={SearchIcon} size={24} className="text-green-500" />
import { HeroHomeIcon } from "@/lib/icons"
import { IconWrapper } from "@/components/common/icon-wrapper"
;<IconWrapper icon={HeroHomeIcon} size="lg" className="text-primary" />