Appearance
Icon
ts
import { XerIcon } from "@xerius/codey-components";Showcases
Default Icon
With Custom Size
With Custom Color
With Animation
With Notification Badge
Option API
Fallback Icon
The XerIcon component has a fallback icon that will be displayed if the wanted icon can't be found. This fallback icon will be the error icon.
Overview
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| icon | Icon Component | true | The imported icon to be shown. | |
| size | String | "md" | false | Set the size of the icon ("sm", "md", "lg", "xl") |
| showNotificationBadge | boolean | false | false | Indicate to show the notification badge on the icon |
| dataAutomationId | String | icon | false | The automation id given to the component. |
Classes
The animation & color can be set using classes:
| Purpose | Example Class |
|---|---|
| Color | text-icon-brand |
| Animation | animate-spin, animate-spin [animation-duration:3s] |