Иконки в кнопках

В библиотеке Naive UI кнопки (n-button) обладают гибкой системой поддержки иконок, что позволяет создавать интерфейсы с наглядной визуальной коммуникацией действий пользователя. Иконки могут быть добавлены как слева, так и справа от текста кнопки, а также использоваться самостоятельно в кнопках без текста.

Подключение иконок

Для использования иконок в Naive UI требуется импортировать компонент NIcon и выбранную иконку. Обычно используются иконки из пакета @vicons/ionicons или @vicons/material. Пример подключения:

import { NButton, NIcon } from 'naive-ui'
import { AddOutline } from '@vicons/ionicons'

export default {
  components: { NButton, NIcon },
}

Добавление иконки к кнопке

Иконка добавляется через слот icon внутри n-button. Если кнопка содержит текст и иконку, иконка автоматически располагается слева от текста:

<n-button>
  <template #icon>
    <n-icon :component="AddOutline" />
  </template>
  Добавить
</n-button>

В данном примере кнопка отображает иконку AddOutline слева от текста “Добавить”.

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

Если требуется кнопка без текста, только с иконкой, можно использовать параметр circle или round для придания кнопке компактной формы:

<n-button circle>
  <template #icon>
    <n-icon :component="AddOutline" />
  </template>
</n-button>

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

Иконка справа от текста

Чтобы разместить иконку справа от текста, необходимо использовать слот suffix:

<n-button>
  Сохранить
  <template #suffix>
    <n-icon :component="AddOutline" />
  </template>
</n-button>

Использование слота suffix позволяет визуально отделять текст и иконку, создавая более читаемое расположение.

Динамические иконки

Иконки в кнопках могут изменяться динамически через реактивные свойства Vue. Например, можно менять иконку в зависимости от состояния загрузки:

<template>
  <n-button :disabled="loading">
    <template #icon>
      <n-icon :component="loading ? LoadingOutline : AddOutline" />
    </template>
    {{ loading ? 'Загрузка...' : 'Добавить' }}
  </n-button>
</template>

<script>
import { ref } from 'vue'
import { NButton, NIcon } from 'naive-ui'
import { AddOutline, LoadingOutline } from '@vicons/ionicons'

export default {
  components: { NButton, NIcon },
  setup() {
    const loading = ref(false)
    return { loading }
  }
}
</script>

Такой подход обеспечивает динамическую визуальную обратную связь пользователю.

Стилизация иконок

Naive UI позволяет легко контролировать размер и цвет иконки через стандартные CSS-свойства. Например, можно задать цвет и размер через style:

<n-button>
  <template #icon>
    <n-icon :component="AddOutline" style="color: white; font-size: 20px;" />
  </template>
  Добавить
</n-button>

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

<n-button>
  <template #icon>
    <n-icon :component="AddOutline" class="custom-icon" />
  </template>
  Добавить
</n-button>

<style>
.custom-icon {
  color: red;
  font-size: 18px;
}
</style>

Комбинирование иконок с разными типами кнопок

На базе Naive UI можно сочетать иконки с различными типами кнопок: primary, info, success, warning, error. Иконка автоматически наследует цвет текста кнопки, но при необходимости её можно настроить отдельно:

<n-button type="success">
  <template #icon>
    <n-icon :component="AddOutline" />
  </template>
  Готово
</n-button>

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

  • Иконки рекомендуется использовать для визуального акцента, а не как единственный способ передачи действия.
  • Для кнопок без текста желательно применять tooltip, чтобы объяснить назначение действия.
  • Размер иконки автоматически подстраивается под размер кнопки, но может быть переопределён через font-size.

Поддержка реактивных библиотек и кастомных иконок

Naive UI совместим с любыми Vue-компонентами-иконками, включая кастомные SVG-компоненты:

<n-button>
  <template #icon>
    <n-icon>
      <svg viewBox="0 0 24 24" width="20" height="20">
        <path d="M12 2L15 8H9L12 2Z" fill="currentColor"/>
      </svg>
    </n-icon>
  </template>
  Кастомная
</n-button>

Использование собственного SVG позволяет полностью контролировать внешний вид и анимацию иконок.

Итоговая схема работы с иконками

  1. Импорт NIcon и выбранных иконок.
  2. Использование слота icon для левой иконки.
  3. Использование слота suffix для правой иконки.
  4. Настройка стилей через style или CSS-классы.
  5. Применение к разным типам кнопок и динамическим состояниям.

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

Оглавление