Icons

Overview

The Icons component is designed for rendering various icons with customizable styles and flexibility. It supports icons from two popular libraries:

The component automatically resolves whether the requested icon comes from @heroicons/vue or @iconify/vue, so you can use either library seamlessly.

Basic Usage

To render an icon, simply use the Icons component and specify the type prop with the name of the desired icon.

Example with Heroicons

If you want to render an icon from the @heroicons/vue library, provide the icon name in PascalCase (e.g., Home):

<Icons type="Home" />

Example with Iconify

For icons from @iconify/vue, provide the icon name in the format used by Iconify (e.g., mdi:home for Material Design Icons):

<Icons type="mdi:home" />

The Icons component will automatically determine the source library and render the appropriate icon.

Customizing Icon Styles

Customize the appearance of an icon using the class and style props:

• class: Add CSS classes to control the size, color, and other styles.
• style: Apply inline styles for additional customization.

  <Icons
    type="Home"
    class="h-8 w-8 text-theme-500 border"
    style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
></Icons>

In this example:

• class sets the size (h-8 w-8) and color (text-blue-500).
• style adds a box shadow.

Icon Fallbacks

The Icons component intelligently determines whether a requested icon exists:

• If the icon is available in @heroicons/vue, it will render it.
• If the icon is unavailable in @heroicons/vue, the component falls back to @iconify/vue.
• If the icon cannot be resolved in either library, no icon will be displayed, and an error will be logged in the console.

Advanced Example: Dynamic Icons

You can dynamically render icons based on user input or application data. For example:

<script setup>
const iconName = 'mdi:account'; // Could be dynamic based on your application logic
</script>

<template>
  <Icons :type="iconName" class="h-6 w-6 text-gray-700" />
</template>

Features

• Seamless Integration with Heroicons and Iconify: Automatically determines the source library for the icon.
• Customizable Appearance: Use class and style props to adjust size, color, and more.
• Fallback Mechanism: Ensures maximum compatibility by falling back between libraries.

Notes

• For @heroicons/vue, the icon names must be in PascalCase (e.g., Home, User).
• For @iconify/vue, use the format <prefix>:<icon-name> (e.g., mdi:home, fa:check-circle).