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

Element Plus предоставляет обширный набор встроенных иконок, доступных через библиотеку @element-plus/icons-vue. Для использования иконок необходимо установить пакет:

npm install @element-plus/icons-vue

И подключить его в проекте Vue 3:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
app.use(ElementPlus)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.mount('#app')

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

Использование иконок внутри компонентов

Иконки могут быть встроены в кнопки, формы, навигационные элементы, карточки и другие компоненты. Например, в кнопке можно использовать иконку через слот:

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

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

Ключевой момент: иконка в Element Plus — это полноценный компонент Vue, что позволяет управлять её размером, цветом и событиями через стандартные свойства:

<Edit style="font-size: 24px; color: #409EFF;" />

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

Иконки в Element Plus наследуют стили CSS, что позволяет гибко их настраивать:

  • Размер: через font-size или через проп size, если иконка обёрнута в компонент Button с атрибутом icon.
  • Цвет: через CSS-свойство color или классы для стилизации.

Пример с изменением размеров и цвета:

<template>
  <div>
    <Delete style="font-size: 30px; color: red;" />
    <Upload style="font-size: 20px; color: green;" />
  </div>
</template>

<script setup>
import { Delete, Upload } from '@element-plus/icons-vue'
</script>

Иконки в кнопках и элементах формы

Element Plus поддерживает встроенное использование иконок через проп icon у компонентов, например у <el-button> или <el-input>:

<el-button type="success" icon="Upload">Загрузить</el-button>
<el-input placeholder="Введите текст" prefix-icon="Search" />

Важно: когда используется prefix-icon или suffix-icon, необходимо передавать компонент иконки Vue, а не строку, если используется синтаксис Composition API:

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

Динамическая подгрузка иконок

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

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

export default {
  components: {
    Edit,
    Delete
  }
}

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

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

Иконки можно анимировать с помощью CSS или через динамическое управление состоянием Vue. Простейший пример вращающейся иконки:

<template>
  <Reload :class="{ spinning: isSpinning }" @click="toggleSpin" />
</template>

<script setup>
import { Reload } from '@element-plus/icons-vue'
import { ref } from 'vue'

const isSpinning = ref(false)
const toggleSpin = () => {
  isSpinning.value = !isSpinning.value
}
</script>

<style>
.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

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

Если требуется использовать собственные SVG-иконки, их можно подключать аналогично компонентам Element Plus. Создаётся Vue-компонент, который принимает стандартные пропсы size и color:

<template>
  <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" :stroke="color" stroke-width="2">
    <path d="M12 2L12 22M2 12L22 12"/>
  </svg>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  size: { type: Number, default: 24 },
  color: { type: String, default: '#000' }
})
</script>

Кастомная иконка затем может использоваться в кнопках или других элементах интерфейса так же, как стандартные компоненты.

Стилизация иконок с помощью классов

Element Plus позволяет назначать CSS-классы напрямую для кастомизации иконок. Пример:

<template>
  <Delete class="danger-icon" />
</template>

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

Это особенно полезно при создании интерфейсов с повторяющейся цветовой схемой для иконок разного типа.

Использование иконок в таблицах и карточках

Иконки активно применяются внутри <el-table> и <el-card> для визуального обозначения действий:

<el-table :data="tableData">
  <el-table-column prop="name" label="Имя" />
  <el-table-column label="Действия">
    <template #default="scope">
      <el-button type="text" @click="edit(scope.row)">
        <Edit />
      </el-button>
      <el-button type="text" @click="remove(scope.row)">
        <Delete />
      </el-button>
    </template>
  </el-table-column>
</el-table>

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

Эта методика применения иконок в Element Plus обеспечивает гибкость, наглядность и легкость поддержки интерфейсов любого масштаба.

Оглавление