## Icon State Management

A component for displaying icons with support for active state, rotation, loading, and skeleton integration.

Icon provides a unified interface for working with icons in the design system, supporting both the main icon and an alternative for the active state. The component automatically manages switching between icons, handles loading events, and integrates with the skeleton system to display loading states.

**Key Features:**

- Display of main and active icons with smooth transitions
- Icon rotation at a specified angle
- Disabled and hide states for visibility control
- Image loading events for icons
- Integration with Skeleton for loading states
- Support within other components (Button, Cell, Chip, Field)

**Typical Use Cases:**

- Icons in buttons and navigation elements
- Interactive icons with state changes
- State indicators in forms and lists
- Decorative interface elements with animation

### Properties

- **`icon`** — The main icon displayed by default.
- **`iconActive`** — The icon that is displayed when the component is in an active state (`active` = `true`).
- **`active`** — A boolean property that toggles the component's state between normal and active.

### Description

- The `icon` property is essential for displaying the icon.
- If `iconActive` is not provided, there will be no visual change when the `active` state changes.
- When `active` is set to `true`, the component will attempt to display the icon specified in `iconActive`.
- The `active` property can be used to create toggles, indicators, and other interactive elements.

### Recommendations

- Use `iconActive` to provide visual feedback upon user interaction (e.g., on click or selection).
- Ensure that `icon` and `iconActive` are visually distinct enough for the user to easily identify the state change.

### Usage Example

```html
<script setup>
import { ref } from 'vue'
import { D1Icon } from '@dxtmisha/d1'

const isActive = ref(false)
</script>

<template>
  <!-- Normal icon -->
  <D1Icon icon="home" />

  <!-- Active icon -->
  <!-- `favorite` will be displayed because active=true -->
  <D1Icon icon="favorite_border" icon-active="favorite" :active="true" />

  <!-- Dynamic state toggle -->
  <D1Icon
    icon="visibility"
    icon-active="visibility_off"
    :active="isVisible"
    @click="isVisible = !isVisible"
  />

  <D1Icon
    icon="home"
    icon-active="favorite"
    :active="isActive"
    turn="90"
    @load="onIconLoad"
  />
</template>
```

> The Icon component can be used both standalone and as part of other UI components through the `icon`, `icon-trailing`, and `icon-active` properties.
