Icon компонент

Icon в библиотеке Naive UI является универсальным инструментом для отображения векторных иконок в интерфейсе. Он интегрируется с системой дизайна Naive UI, поддерживает кастомизацию через свойства и стили, и позволяет использовать как встроенные, так и сторонние SVG-иконки.

Подключение и базовое использование

Для начала необходимо импортировать компонент NIcon из пакета naive-ui:

import { NIcon } from 'naive-ui'

Простейший пример использования:

<template>
  <n-icon :component="iconComponent" />
</template>

<script setup>
import { HomeOutline } from '@vicons/ionicons5'

const iconComponent = HomeOutline
</script>

Ключевой момент: свойство component принимает компонент SVG, что делает NIcon гибким для работы с любой системой иконок, совместимой с Vue.

Поддержка кастомных SVG

Можно использовать кастомные SVG напрямую, не импортируя библиотеки иконок. Например:

<template>
  <n-icon>
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2L2 22h20L12 2z"/>
    </svg>
  </n-icon>
</template>

Особенности:

  • Атрибут fill="currentColor" позволяет иконке наследовать цвет родительского текста.
  • Любые SVG-элементы можно вставлять внутри NIcon, что позволяет легко создавать уникальные графические элементы интерфейса.

Размер и масштабирование

Компонент NIcon имеет свойство size, которое управляет размером иконки:

<n-icon :component="iconComponent" size="24" />
<n-icon :component="iconComponent" size="2em" />

Поддерживаются:

  • Числовые значения (24) — интерпретируются как пиксели.
  • Строковые значения ('2em', '1.5rem') — позволяют использовать относительные единицы для адаптивного интерфейса.

Цвет и стилизация

Свойство style или CSS-классы позволяют полностью контролировать цвет иконки:

<n-icon :component="iconComponent" style="color: #42b983; font-size: 32px;" />

Важно:

  • Цвет иконки наследуется через color или атрибут fill="currentColor" внутри SVG.
  • Размер можно комбинировать с CSS для тонкой настройки внешнего вида.

Использование с библиотеками иконок

Naive UI не ограничивается встроенными иконками. Наиболее популярны интеграции с:

  • @vicons/ionicons5
  • @vicons/mdi
  • Любые Vue-совместимые SVG-компоненты

Пример интеграции с Material Design Icons:

import { MdHome } from '@vicons/mdi'

<n-icon :component="MdHome" size="32" />

Такой подход обеспечивает:

  • Мгновенную замену иконок без изменения структуры компонентов.
  • Полную совместимость с системой цветов и размеров Naive UI.

Интерактивные иконки

Компонент NIcon можно использовать внутри кнопок и кликабельных элементов:

<n-button>
  <n-icon :component="iconComponent" size="20" />
  Домой
</n-button>

Особенности:

  • Иконка автоматически наследует состояние родительского компонента (например, hover).
  • Позволяет создавать кнопки с визуально согласованными иконками без дополнительной настройки.

Динамическая подгрузка иконок

Для приложений с большим количеством иконок рекомендуется использовать динамическую подгрузку:

<template>
  <n-icon :component="currentIcon" />
</template>

<script setup>
import { ref } from 'vue'
import * as Icons from '@vicons/ionicons5'

const currentIcon = ref(Icons.HomeOutline)

// Для смены иконки
function changeIcon(name) {
  currentIcon.value = Icons[name]
}
</script>

Преимущества:

  • Снижение объема сборки, если загружать только используемые иконки.
  • Простая замена иконок по состоянию приложения.

Анимация и трансформации

С помощью CSS можно добавлять анимации и эффекты вращения, масштабирования, изменения цвета:

<n-icon :component="iconComponent" class="rotating-icon" />

<style>
.rotating-icon {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
  • Возможна комбинация с переходами Vue (<transition>) для плавного появления иконок.
  • Поддерживаются hover-эффекты через CSS.

Лучшие практики

  • Использовать fill="currentColor" для SVG, чтобы иконки автоматически подстраивались под цвет темы.
  • Размер задавать через свойство size, а не жестко через CSS, для унификации интерфейса.
  • Динамическая подгрузка иконок снижает размер итоговой сборки.
  • Объединение с компонентами кнопок и меню позволяет строить единый визуальный язык интерфейса.

Компонент NIcon обеспечивает максимальную гибкость для работы с иконками в приложениях на Vue с использованием Naive UI, поддерживая кастомизацию, интеграцию сторонних библиотек и динамическое управление состояниями.

Оглавление