Icon

The Icon component in Electrik Slate UI allows you to easily include scalable vector icons in your application. With support for dark mode, customizable sizes, and color options, it integrates seamlessly into your design system.

Props

Prop Name	Type	Default	Description
`icon`	String	`null`	The name of the icon to display (required).
`size`	String	`md`	The size of the icon (`xs`, `sm`, `md`, `lg`, `xl`).
`color`	String	`currentColor`	The color of the icon (inheriting from parent by default, or using a Tailwind color class).
`darkColor`	String	`white`	The color of the icon when in dark mode (defaults to white if `color` is `currentColor`).
`class`	String	`''`	Additional classes to apply to the icon component.

Examples

Basic Icon Usage

This example demonstrates how to use an icon with default settings:

<!-- Basic Icon -->
<x-slate::icon icon="carbon-checkmark" />

Custom Icon Size

This example demonstrates how to use an icon with a custom size:

<!-- Icon with custom size -->
<x-slate::icon icon="carbon-checkmark" size="lg" />
<!-- Icon with custom size -->
<x-slate::icon icon="carbon-checkmark" size="sm" />
<!-- Icon with custom size -->
<x-slate::icon icon="carbon-checkmark" size="xs" />

Custom Icon Color

This example demonstrates how to use an icon with a custom color:

<!-- Icon with custom color -->
<x-slate::icon icon="carbon-checkmark" color="primary" />

Icon with Dark Mode Support

This example demonstrates how the icon adapts to dark mode, changing its color based on the darkColor prop:

<!-- Icon with dark mode support -->
<x-slate::icon icon="carbon-checkmark" color="gray-800" darkColor="white" />

Custom Classes

This example demonstrates how to apply additional custom classes to the icon:

<!-- Icon with custom classes -->
<x-slate::icon icon="carbon-checkmark" class="animate-spin" />

Customization

The Icon component is highly customizable, allowing you to control its size, color, and behavior to fit the needs of your application. By default, it inherits the color from its parent element, but you can easily override this with specific colors or dark mode adjustments.

Last updated on 2024-08-24T05:26:56+00:00