Icons

Icons — это компонент для рендеринга настраиваемых иконок с использованием библиотек @heroicons/vue и @iconify/vue.

Обзор

Компонент Icons предназначен для рендеринга различных иконок с настраиваемыми стилями и гибкостью. Он поддерживает иконки из двух популярных библиотек:

Heroicons

Предоставляет коллекцию высококачественных SVG иконок, оптимизированных для Tailwind CSS.

Iconify

Универсальный фреймворк иконок, поддерживающий тысячи наборов иконок.

Компонент автоматически определяет, из какой библиотеки запрашивается иконка, поэтому вы можете использовать любую библиотеку без проблем.

Основное использование

Чтобы отрендерить иконку, просто используйте компонент Icons и укажите prop type с именем желаемой иконки.

Пример с Heroicons

Если вы хотите отрендерить иконку из библиотеки @heroicons/vue, укажите имя иконки в PascalCase (например, Home):

<Icons type="Home"/>

Пример с Iconify

Для иконок из @iconify/vue, укажите имя иконки в формате, используемом Iconify (например, mdi:home для Material Design Icons):

<Icons type="mdi:home"/>

Компонент Icons автоматически определит исходную библиотеку и отрендерит соответствующую иконку.

Настройка стилей иконок

Настройте внешний вид иконки с помощью props class и style:

class: Добавьте CSS классы для управления размером, цветом и другими стилями.
style: Примените inline стили для дополнительной настройки.

  <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>

В этом примере:

class устанавливает размер (h-8 w-8) и цвет (text-blue-500).
style добавляет тень.

Резервные иконки

Компонент Icons интеллектуально определяет, существует ли запрашиваемая иконка:

Если иконка доступна в @heroicons/vue, она будет отрендерена.
Если иконка недоступна в @heroicons/vue, компонент переключится на @iconify/vue.
Если иконка не может быть разрешена ни в одной из библиотек, никакая иконка не будет отображена, и ошибка будет записана в консоль.

Продвинутый пример: динамические иконки

Вы можете динамически рендерить иконки на основе ввода пользователя или данных приложения. Например:

<script setup>
  const iconName = 'mdi:account'; // Может быть динамическим на основе логики вашего приложения
</script>

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

Функции

Беспроблемная интеграция с Heroicons и Iconify: Автоматически определяет исходную библиотеку для иконки.
Настраиваемый внешний вид: Используйте props class и style для настройки размера, цвета и многого другого.
Механизм резервирования: Обеспечивает максимальную совместимость, переключаясь между библиотеками.

Примечания

Для @heroicons/vue имена иконок должны быть в PascalCase (например, Home, User).
Для @iconify/vue используйте формат <префикс>:<имя-иконки> (например, mdi:home, fa:check-circle).