Размер и цвет иконок

В Element Plus иконки играют важную роль в визуальной идентификации элементов интерфейса, кнопок, меню и других компонентов. Управление их размером и цветом осуществляется через сочетание компонентов библиотеки, пропсов и CSS-стилей. Разберем детально, как это сделать.

Управление размером иконок

Element Plus предоставляет несколько способов изменения размера иконок в зависимости от того, используются ли они как компоненты (ElIcon) или через SVG-иконки напрямую.

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

Все встроенные иконки оборачиваются в компонент :

Проп size принимает числовое значение в пикселях.
Можно также использовать строку с единицей измерения: "2rem", "24px".

Ключевой момент: передача размера напрямую через проп size позволяет избежать дополнительных CSS и гарантирует правильное масштабирование SVG.

2. Изменение размера через CSS

Если требуется более гибкая настройка, можно использовать CSS-классы:

.custom-icon {
  font-size: 40px;
  width: 40px;
  height: 40px;
}

font-size влияет на визуальный масштаб иконки.
width и height контролируют размеры контейнера SVG.
Такой подход удобен для групп иконок с одинаковыми стилями.

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

Цвет иконки в Element Plus можно менять несколькими способами: через проп color, CSS или наследование от родительских элементов.

1. Проп `color` у

Проп color автоматически применяет указанный цвет к SVG-иконке.
Поддерживает HEX, RGB, HSL и стандартные CSS-цвета.

2. Изменение цвета через CSS

.custom-color-icon {
  color: #67C23A;
}

CSS позволяет динамически менять цвет через классы, особенно полезно при темной и светлой теме.
Можно использовать :hover, :active для эффектов при наведении.

3. Наследование цвета

Если находится внутри компонента с установленным цветом текста, иконка может наследовать этот цвет:

Наследование работает по стандартным правилам CSS.
Позволяет применять цветовую тему сразу к группе элементов.

Динамическое управление размером и цветом

Element Plus поддерживает реактивное управление через Vue-переменные:

v-model позволяет интерактивно менять размер и цвет.
Такой подход особенно полезен при создании панелей настроек интерфейса.

Особенности работы с SVG-иконками

Element Plus использует SVG-иконки с возможностью настройки через CSS-переменные:

.el-icon svg {
  width: 36px;
  height: 36px;
  fill: currentColor;
}

Использование currentColor позволяет иконке автоматически подстраиваться под цвет текста родителя.
Размер SVG можно контролировать через width и height, при этом масштаб сохраняется пропорционально.