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

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

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

Naive UI содержит компонент NIcon, который служит контейнером для любых иконок. Для встроенных иконок достаточно импортировать их из пакета @vicons/xxx и обернуть в NIcon.

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

export default {
  components: { NButton, NIcon },
  template: `
    <n-button>
      <n-icon :component="Add" />
      Добавить
    </n-button>
  `
}

Ключевой момент — NIcon принимает проп component, который должен быть Vue-компонентом, представляющим иконку. Это позволяет использовать любые иконки, совместимые с Vue, в едином стиле с библиотекой.

Подключение кастомных SVG-иконок

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

  1. Импорт SVG как компонента Использование плагина vite-svg-loader или vue-svg-loader позволяет импортировать SVG-файл как Vue-компонент и передавать его в NIcon.
import MyCustomIcon from './icons/MyCustomIcon.svg'

export default {
  components: { NIcon },
  template: `
    <n-icon :component="MyCustomIcon" />
  `
}
  1. Инлайн SVG через слоты NIcon поддерживает слот default, что позволяет напрямую вставлять SVG-код:
<n-icon>
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M12 2L15 8H9L12 2Z" fill="currentColor"/>
  </svg>
</n-icon>

Использование fill="currentColor" гарантирует, что иконка будет наследовать цвет из CSS, что упрощает стилизацию в темной и светлой теме.

Настройка размера и цвета

NIcon автоматически наследует размеры и цвета от родительских компонентов, однако для тонкой настройки доступны следующие возможности:

  • Размер через CSS:
.custom-icon svg {
  width: 32px;
  height: 32px;
  color: #42b983;
}
  • Прямое указание размеров через пропсы style или class:
<n-icon :component="MyCustomIcon" style="width:40px;height:40px;color:red;" />
  • Динамическая смена цвета:
<n-icon :component="MyCustomIcon" :style="{ color: isActive ? 'green' : 'gray' }" />

Обработка событий на иконках

Поскольку NIcon является обычным Vue-компонентом, на него можно навешивать события:

<n-icon :component="MyCustomIcon" @click="handleClick" />

Это особенно удобно для кнопок управления, уведомлений или интерактивных элементов.

Создание библиотеки кастомных иконок

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

// icons/index.js
import AddIcon from './AddIcon.svg'
import DeleteIcon from './DeleteIcon.svg'

export const icons = {
  add: AddIcon,
  delete: DeleteIcon
}

Использование:

import { icons } from './icons'

<n-icon :component="icons.add" />

Такой подход упрощает поддержку и масштабирование интерфейса, позволяет легко заменять иконки без изменения кода компонентов.

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

Для сохранения единого стиля с темами Naive UI важно использовать переменные темы и currentColor:

<n-icon>
  <svg viewBox="0 0 24 24">
    <path d="..." fill="currentColor"/>
  </svg>
</n-icon>

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

Использование анимации и трансформаций

Кастомные SVG-иконки легко анимировать через CSS или Vue-трансформации:

.rotate-icon svg {
  transition: transform 0.3s;
}

.rotate-icon:hover svg {
  transform: rotate(90deg);
}
<n-icon :component="MyCustomIcon" class="rotate-icon" />

Это позволяет создавать интерактивные и динамичные элементы, не прибегая к сторонним библиотекам.

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

Оглавление