To see all available icons, explore Icons.

Usage

Default

Use the name prop to specify which icon to display from the Tabler icon set.

Colors

Use the color prop to customize the icon's color.

Sizes

Use the size prop to customize the icon's size.

Different Icons

The component supports a wide variety of icons from the Tabler icon set. Here are some examples:

<script setup lang="ts">
import CLIcon from '@codeandfunction/callaloo/CLIcon';
import { CLColors, CLIconNames, CLIconSizes } from '@codeandfunction/callaloo';
</script>

<template>
  <CLIcon :color="CLColors.Primary" :name="CLIconNames.Apps" :size="CLIconSizes.Large" />
  <CLIcon :color="CLColors.Success" :name="CLIconNames.Bell" :size="CLIconSizes.Large" />
  <CLIcon :color="CLColors.Warning" :name="CLIconNames.Ai" :size="CLIconSizes.Large" />
  <CLIcon :color="CLColors.Danger" :name="CLIconNames.Archive" :size="CLIconSizes.Large" />
  <CLIcon :color="CLColors.Info" :name="CLIconNames.Book" :size="CLIconSizes.Large" />
</template>

Props