Интеграция иконок

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

import { NIcon, NButton } from 'naive-ui'
import { BellOutline } from '@vicons/ionicons5'

export default {
  components: { NIcon, NButton },
  setup() {
    return { BellOutline }
  },
  template: `
    <n-button>
      <n-icon :component="BellOutline" />
      Уведомления
    </n-button>
  `
}

Здесь ключевой момент — свойство component, через которое передается SVG-компонент. Важно: Naive UI не поставляет собственный набор иконок, поэтому обычно используются внешние библиотеки, такие как @vicons/ionicons5, @vicons/mdi, @vicons/fa.

Основные принципы использования

  1. Оборачиваем иконку в NIcon Это позволяет Naive UI корректно обрабатывать размеры и цвета в соответствии с темой интерфейса. Например, если активна тёмная тема, иконка автоматически наследует цвет текста кнопки.

  2. Размер и цвет Компонент NIcon поддерживает стили через style и class. Для единообразия можно использовать CSS-переменные Naive UI, например:

<n-icon :component="BellOutline" style="font-size: var(--n-font-size-3); color: var(--n-text-color)" />
  1. Динамическая замена иконок В некоторых интерфейсах иконки могут меняться в зависимости от состояния:
<n-icon :component="isActive ? ActiveIcon : InactiveIcon" />

Это удобно для индикаторов состояния, переключателей и кнопок управления.

Интеграция с компонентами Naive UI

Naive UI позволяет добавлять иконки почти во все визуальные компоненты:

  • NButton: добавление иконок слева или справа от текста.
  • NMenu: иконки для пунктов меню, которые визуально структурируют навигацию.
  • NInput: иконки в полях ввода для обозначения действий (например, поиск, очистка).
<n-menu :options="menuOptions" />
const menuOptions = [
  {
    label: 'Профиль',
    key: 'profile',
    icon: BellOutline
  },
  {
    label: 'Настройки',
    key: 'settings',
    icon: SettingsOutline
  }
]

Здесь icon автоматически оборачивается в NIcon внутри компонента NMenu.

Работа с кастомными SVG

Для интеграции собственных SVG можно использовать следующий подход:

const CustomIcon = {
  name: 'CustomIcon',
  render() {
    return (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2L15 8H9L12 2Z" />
      </svg>
    )
  }
}

<n-icon :component="CustomIcon" />

Ключевой момент — использовать fill="currentColor", чтобы иконка наследовала текущий цвет текста компонента Naive UI.

Анимация иконок

Иконки можно анимировать с помощью CSS и динамически менять их состояние через свойства компонента:

.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
<n-icon :component="BellOutline" class="spin" />

Также возможна интеграция с реактивными состояниями для динамической анимации в зависимости от пользовательского взаимодействия.

Рекомендации по оптимизации

  • Использовать только необходимые иконки — импорт всех SVG из библиотеки увеличивает размер сборки.
  • Кэшировать часто используемые иконки через отдельные компоненты.
  • Наследование стилей темы — всегда применять currentColor в fill и stroke SVG, чтобы иконки автоматически адаптировались к светлой и тёмной теме.

Этот подход обеспечивает единообразие интерфейса и легкую интеграцию иконок с компонентами Naive UI, поддерживает динамику интерфейса и соблюдает принципы масштабируемости приложений.

Оглавление