Библиотеки иконок

Naive UI предоставляет удобный способ интеграции иконок в интерфейсные компоненты. Библиотеки иконок позволяют использовать графические элементы, которые повышают читаемость интерфейса и делают его визуально привлекательным. В Naive UI поддерживается работа с SVG-иконками и сторонними библиотеками, такими как @vicons, ant-design-icons, feather-icons и другие.

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

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

<NButton>
  <NIcon>
    <CloseOutline />
  </NIcon>
  Закрыть
</NButton>

В этом примере <NIcon> оборачивает компонент иконки, предоставленный библиотекой @vicons/ionicons5, обеспечивая единообразный масштаб и стилизацию в рамках темы Naive UI.

Подключение сторонних библиотек

Для подключения сторонней библиотеки иконок используется стандартный импорт компонентов. Важно учитывать, что каждая библиотека имеет собственный набор иконок и формат экспорта. Например, для ant-design-icons:

import { NIcon } from 'naive-ui'
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons-vue'

<NIcon component={SearchOutlined} />
<NIcon component={DeleteOutlined} />

Здесь свойство component позволяет передать иконку напрямую в NIcon, что упрощает её использование в различных компонентах.

Кастомные SVG-иконки

Naive UI поддерживает использование кастомных SVG через NIcon. Для этого достаточно передать SVG как Vue-компонент:

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

<NIcon>
  <CustomIcon />
</NIcon>

Использование fill="currentColor" позволяет иконке автоматически подстраиваться под цвет текста или тему компонента.

Размеры и стилизация

Размер иконок в Naive UI задается через проп size в компоненте NIcon:

<NIcon size="24">
  <CloseOutline />
</NIcon>

Поддерживаются единицы в пикселях (px) и числовые значения. Кроме того, иконки наследуют цвет родительского компонента, что позволяет интегрировать их в кнопки, тултипы и меню без дополнительной стилизации.

Использование иконок в компонентах Naive UI

Иконки тесно интегрированы с компонентами библиотеки:

  • Кнопки: NButton поддерживает слот для иконки через NIcon.
  • Меню и навигация: NMenu позволяет добавлять иконки к элементам меню.
  • Формы и поля ввода: NInput имеет слоты prefix и suffix для вставки иконок.

Пример для поля ввода с иконкой поиска:

<NInput placeholder="Поиск">
  <template #prefix>
    <NIcon component={SearchOutlined} />
  </template>
</NInput>

Оптимизация загрузки иконок

При работе с большим количеством иконок рекомендуется использовать ленивую загрузку или импорт отдельных иконок вместо целых библиотек. Это снижает размер итогового бандла и повышает производительность приложения:

import { defineAsyncComponent } from 'vue'

const LazySearchIcon = defineAsyncComponent(() =>
  import('@ant-design/icons-vue/lib/icons/SearchOutlined')
)

Управление темами и цветами

Naive UI автоматически адаптирует иконки к текущей теме. Для изменения цвета иконки вручную используется CSS-переменная --n-color или color:

.custom-icon {
  color: #ff4d4f;
}
<NIcon class="custom-icon">
  <DeleteOutlined />
</NIcon>

Таким образом, иконки становятся полностью управляемыми и интегрируемыми в стилизованные интерфейсы.

Совместимость и лучшие практики

  • Использовать слоты prefix и suffix для иконок в интерактивных компонентах.
  • Для кастомных иконок использовать fill="currentColor".
  • Подключать только нужные иконки из библиотеки, избегая массового импорта всего набора.
  • Размеры задавать через проп size, а не через CSS напрямую, для корректного масштабирования в разных компонентах.

Эти подходы обеспечивают единообразие интерфейса, минимальный размер бандла и полное соответствие стилю Naive UI.

Оглавление