Пользовательские иконки

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

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

Пользовательская иконка в Element Plus представляет собой Vue-компонент, который принимает стандартные свойства size, color и onClick.

Пример регистрации собственной SVG-иконки:

// components/icons/MyIcon.vue

Здесь currentColor позволяет иконке наследовать цвет текста, обеспечивая гибкость при стилизации.

Для глобальной регистрации:

import { App } from 'vue'
import MyIcon from './components/icons/MyIcon.vue'

export default {
  install(app: App) {
    app.component('MyIcon', MyIcon)
  }
}

Теперь можно использовать в любом компоненте приложения.

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

Элементы, поддерживающие иконки, включают Button, Input, Select, Dropdown и Menu. Для примера, добавим пользовательскую иконку в кнопку:

Чтобы иконка корректно отображалась, необходимо зарегистрировать её через globalProperties или в components текущего компонента. Важно помнить, что значение свойства icon принимает имя компонента, а не путь к файлу.

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

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

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

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

Размеры иконок в Element Plus контролируются через свойство size. Пользовательский компонент можно сделать полностью совместимым, используя props:

Важно учитывать единообразие с элементами Element Plus — стандартные иконки используют 24px по умолчанию, поэтому для визуальной гармонии следует придерживаться этого размера.

Интеграция с темами и цветовой схемой

Для адаптации к светлой и тёмной теме удобно использовать currentColor и CSS-переменные:

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

Оптимизация производительности

При большом количестве иконок рекомендуется:

  1. Lazy-load компонентов иконок через defineAsyncComponent:
import { defineAsyncComponent } from 'vue'

const AsyncIcon = defineAsyncComponent(() => import('./components/icons/MyIcon.vue'))
  1. Использовать SVG-спрайты для уменьшения количества HTTP-запросов.
  2. Минимизировать размер SVG через инструменты типа SVGO, удаляя лишние атрибуты и комментарии.

Создание библиотеки пользовательских иконок

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

// icons/index.js
import MyIcon from './MyIcon.vue'
import AnotherIcon from './AnotherIcon.vue'

export const Icons = {
  MyIcon,
  AnotherIcon
}

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

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

Совместимость с Element Plus API

Пользовательские иконки полностью совместимы с API Element Plus, включая слоты prefix и suffix для компонентов ввода, что позволяет интегрировать их в Input и Select:

Использование слотов обеспечивает точное позиционирование и позволяет сохранять визуальный стиль стандартных иконок Element Plus.

Оглавление