Установка пакета иконок

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

Установка пакета

Для начала необходимо установить пакет иконок с помощью npm или yarn. Выполняется это командой:

npm install @element-plus/icons-vue --save

или через yarn:

yarn add @element-plus/icons-vue

После установки пакет становится доступен в проекте и готов к использованию.

Импорт и регистрация отдельных иконок

Element Plus позволяет импортировать и регистрировать только те иконки, которые действительно используются, что снижает размер итогового бандла. Импорт отдельных иконок выглядит следующим образом:

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

const app = createApp(App)

app.component('ElIconSearch', Search)
app.component('ElIconEdit', Edit)
app.component('ElIconDelete', Delete)

app.mount('#app')
  • Search, Edit, Delete — имена иконок, которые необходимо использовать.
  • Регистрируем компоненты через app.component, присваивая им читаемое имя, которое потом удобно использовать в шаблоне.

Использование иконок в шаблоне

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

<template>
  <div>
    <el-icon><el-icon-search /></el-icon>
    <el-icon><el-icon-edit /></el-icon>
    <el-icon><el-icon-delete /></el-icon>
  </div>
</template>

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

  • <el-icon> служит контейнером для SVG иконки, обеспечивая корректное отображение.
  • Можно применять CSS-классы для изменения размера и цвета иконок:
<el-icon class="icon-large" color="#409EFF" />
.icon-large {
  font-size: 32px;
}

Глобальная регистрация всех иконок

Если проект предполагает использование большого количества иконок, удобнее зарегистрировать их глобально. Для этого можно импортировать весь пакет и зарегистрировать иконки циклом:

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

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

app.mount('#app')
  • Такой подход увеличивает размер бандла, поэтому его стоит использовать только при необходимости глобального доступа ко всем иконкам.

Совместимость с TypeScript

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

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

export function registerIcons(app: App) {
  Object.entries(ElementPlusIconsVue).forEach(([key, component]) => {
    app.component(key, component)
  })
}
  • Этот метод позволяет избежать ошибок типов при использовании иконок в шаблоне и поддерживает автокомплит в редакторах.

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

Для оптимизации производительности можно использовать динамический импорт иконок только по необходимости:

const icons = {
  Search: () => import('@element-plus/icons-vue/lib/icons/Search'),
  Edit: () => import('@element-plus/icons-vue/lib/icons/Edit')
}

app.component('ElIconDynamic', defineAsyncComponent(icons.Search))
  • Динамический импорт снижает нагрузку на основной бандл.
  • Особенно полезен для крупных проектов с сотнями иконок.

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

Иконки в Element Plus являются SVG-компонентами, поэтому стилизовать их можно стандартными CSS-свойствами:

<el-icon style="font-size: 24px; color: red;" />
  • font-size — управляет размером иконки.
  • color — изменяет цвет заливки SVG.
  • Можно применять классы для единообразной стилизации всех иконок на странице.

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

Иконки удобно интегрируются с другими компонентами Element Plus, например, с кнопками, вкладками и меню:

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

<el-menu>
  <el-menu-item index="1">
    <el-icon><el-icon-search /></el-icon>
    Поиск
  </el-menu-item>
</el-menu>
  • Элементы интерфейса автоматически наследуют размеры и цвет иконок при стилизации компонентов.
  • Возможна комбинация нескольких иконок в одном компоненте.

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

Оглавление