Icon is a light wrapper component that provides a standardised set of styles to the icon in use. It requires an SVG from our icon library to be passed into the is prop.
<div className="flex gap-3">
<Icon is={BatteryMedium} />
<Icon is={Crossing} />
<Icon is={EyeCrossed} />
<Icon is={Paperclip} />
<Icon is={Sun} />
<Icon is={Wheelchair} />
</div>
Ensure that you pair the imported icon (in this case Brightness) with the Icon component to render in a consistent and reliable way. Review the available icons on the icon listing page
import { Icon } from '@atom-learning/components'
import { Brightness } from '@atom-learning/icons'
const Component = () => (
<Icon is={Brightness} size="md" className="text-primary-800" />
)
API Reference
| Prop | Type | Default | Required |
|---|---|---|---|
as | JSX.IntrinsicElements | - | - |
is | FC<SVGProps<SVGSVGElement>> | - | |
size | Partial<Record<Breakpoint, "sm" | "md" | "lg">> | "sm" | "md" | "lg" | md | - |