SVG иконки

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

Импорт SVG-иконок

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

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

После импорта иконки можно использовать в любом компоненте Vue через тег:

В примере компонент вставляется внутрь кнопки, что позволяет полностью контролировать его позицию, размер и стиль.

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

Element Plus не ограничивается только встроенными иконками. Можно импортировать собственные SVG как компоненты:

CustomIcon.vue может быть оформлен следующим образом:

Использование fill="currentColor" позволяет SVG наследовать цвет текста родительского элемента, что делает иконку полностью интегрированной с темами Element Plus.

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

Размер и цвет SVG-иконок можно задавать через стили CSS или пропсы компонентов:

Также возможна установка размера через глобальные классы:

.icon-large {
  font-size: 32px;
  color: #67C23A;
}

Использование CSS классов удобно при создании унифицированной системы иконок на сайте.

Встроенные SVG в компоненты Element Plus

Многие компоненты Element Plus имеют проп icon, который принимает как имя встроенной иконки, так и компонент SVG:



  
  Сохранить

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

  • prefix-icon и suffix-icon работают только с именами иконок из библиотеки @element-plus/icons-vue.
  • Вставка SVG-компонента внутрь слотов (например,