CataUiIcon

A component that renders Bootstrap icons with customizable size and color.

Examples

Basic Usage

<CataUiIcon icon="bi-cup-hot" color="#fff" size="26px" />

Different Icon Sizes

<div class="d-flex align-items-center gap-3">
  <CataUiIcon icon="bi-star-fill" color="gold" size="16px" />
  <CataUiIcon icon="bi-star-fill" color="gold" size="24px" />
  <CataUiIcon icon="bi-star-fill" color="gold" size="32px" />
</div>

Custom Colors

<div class="d-flex align-items-center gap-3">
  <CataUiIcon icon="bi-circle-fill" color="var(--color-primary)" />
  <CataUiIcon icon="bi-circle-fill" color="var(--color-secondary)" />
  <CataUiIcon icon="bi-circle-fill" color="#ff5733" />
</div>

API Reference

Props

Prop	Description	Type	Default	Required
color	The color of the icon. Can be any valid CSS color value or design token variable	String	'var(--color-grey-900)'	false
icon	The Bootstrap icon class name with the 'bi-' prefix (see Icons)	String		true
size	The size of the icon. Can be specified in any valid CSS unit (px, rem, em, etc.)	String	'16px'	false