Встроенные иконки

Element Plus предоставляет широкий набор встроенных иконок, которые интегрированы в компоненты и могут использоваться как в интерфейсе, так и в кастомных элементах. Эти иконки построены на библиотеке @element-plus/icons-vue и полностью совместимы с Vue 3. Использование встроенных иконок позволяет ускорить разработку и поддерживать единый визуальный стиль приложения.

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

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

npm install @element-plus/icons-vue

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

import { ElIcon } from 'element-plus'
import { Search, Edit, Delete } from '@element-plus/icons-vue'

export default {
  components: {
    ElIcon,
    Search,
    Edit,
    Delete
  }
}

После регистрации иконки могут быть использованы внутри шаблона через компонент <el-icon>:

<template>
  <el-icon>
    <Search />
  </el-icon>
</template>

Важно: оборачивать иконку всегда в <el-icon> — это обеспечивает правильное масштабирование и стилизацию.

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

Многие компоненты Element Plus имеют свойство prefix-icon и suffix-icon, позволяющее подставлять иконки напрямую без ручного оборачивания:

<el-input
  placeholder="Поиск"
  prefix-icon="Search">
</el-input>

<el-button type="primary" icon="Edit">Редактировать</el-button>

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

<el-button type="primary">
  <el-icon>
    <Edit />
  </el-icon>
  Редактировать
</el-button>

Доступные иконки и их категории

Иконки Element Plus делятся на несколько категорий:

  1. Основные (Basic) — часто используемые элементы интерфейса: Search, Edit, Delete, Plus.
  2. Медиа (Media) — иконки для управления медиа: VideoPlay, Volume, Picture.
  3. Навигационные (Navigation) — стрелки, меню, закрытие: ArrowDown, ArrowRight, Close.
  4. Состояния (Status) — индикаторы ошибок, успеха и предупреждений: SuccessFilled, Warning, Error.
  5. Специальные (Miscellaneous) — уникальные иконки для расширенного интерфейса: Loading, QuestionFilled.

Каждая иконка представляет собой Vue-компонент и поддерживает настройку размера и цвета через пропсы size и color:

<el-icon :size="32" color="#409EFF">
  <Delete />
</el-icon>

Динамическая подстановка иконок

Иконки можно подставлять динамически, используя динамический компонент Vue:

<template>
  <el-icon>
    <component :is="iconComponent" />
  </el-icon>
</template>

<script>
import { Search, Edit } from '@element-plus/icons-vue'

export default {
  data() {
    return {
      iconComponent: Search
    }
  },
  methods: {
    switchIcon() {
      this.iconComponent = this.iconComponent === Search ? Edit : Search
    }
  }
}
</script>

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

Стилизация встроенных иконок

Иконки наследуют стили из CSS, но можно применять кастомные правила:

<el-icon class="custom-icon">
  <Edit />
</el-icon>

<style>
.custom-icon {
  color: red;
  font-size: 40px;
  transition: transform 0.3s;
}
.custom-icon:hover {
  transform: rotate(20deg);
}
</style>

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

Интеграция с кнопками и элементами формы

Иконки часто комбинируются с el-button, el-input, el-select и другими компонентами:

<el-button type="success" icon>
  <el-icon>
    <Plus />
  </el-icon>
  Добавить
</el-button>

<el-input
  placeholder="Введите текст"
  suffix-icon="Search">
</el-input>

Совет: всегда использовать <el-icon> для правильного выравнивания и масштабирования, особенно в кнопках с текстом.

Анимация и состояние загрузки

Для индикаторов загрузки иконки могут использоваться с CSS-анимацией или компонентом <el-loading>:

<el-icon class="loading-icon">
  <Loading />
</el-icon>

<style>
.loading-icon {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

Это позволяет создавать интерактивные интерфейсы с визуальной обратной связью без дополнительных библиотек.

Рекомендации по использованию

  • Предпочтительно использовать Vue-компоненты иконок, а не строки с именами.
  • Всегда оборачивать иконку в <el-icon> для консистентного размера и цветовой схемы.
  • Для динамических интерфейсов использовать <component :is="...">.
  • При необходимости анимации — применять CSS или интеграцию с <el-loading>.

Встроенные иконки Element Plus обеспечивают унифицированный стиль, простоту использования и высокую гибкость при разработке сложных интерфейсов на Vue 3.

Оглавление