Icon

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

Импорт и регистрация иконок

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

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

export default defineComponent({
  components: {
    DeleteIcon: Delete,
    EditIcon: Edit
  }
});

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

import { createApp } from 'vue';
import App from './App.vue';
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');

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

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

Иконки можно использовать как стандартные Vue-компоненты. Атрибуты позволяют изменять размер, цвет и добавлять обработчики событий:

<template>
  <div>
    <DeleteIcon style="color: red; font-size: 24px;" @click="handleDelete" />
    <EditIcon :style="{ color: 'blue', fontSize: '20px' }" />
  </div>
</template>

<script>
export default {
  methods: {
    handleDelete() {
      console.log('Удаление выполнено');
    }
  }
};
</script>

Ключевые моменты:

  • Размер регулируется через CSS font-size или width/height для SVG.
  • Цвет управляется через CSS color или атрибут fill.
  • События можно назначать как для любых Vue-компонентов (@click, @mouseenter и т.д.).

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

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

<template>
  <component :is="currentIcon" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const currentIcon = ref(null);

    import('@element-plus/icons-vue/Check').then(module => {
      currentIcon.value = module.default;
    });

    return { currentIcon };
  }
};
</script>

Преимущества:

  • Загружается только необходимая иконка.
  • Снижается размер основного JavaScript-файла.

Стилизация и масштабирование

Иконки в Element Plus полностью векторные и масштабируемые. Основные способы стилизации:

  1. Через атрибут style или class:
<DeleteIcon style="color: green; font-size: 30px;" />
  1. Через CSS-классы:
.custom-icon {
  color: orange;
  width: 40px;
  height: 40px;
}
<DeleteIcon class="custom-icon" />
  1. Использование :size и :color через обертку компонента:
<template>
  <div :style="{ fontSize: iconSize + 'px', color: iconColor }">
    <EditIcon />
  </div>
</template>

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

export default {
  components: { EditIcon: Edit },
  setup() {
    const iconSize = ref(36);
    const iconColor = ref('#1f8ef1');
    return { iconSize, iconColor };
  }
};
</script>

Комбинирование с другими компонентами Element Plus

Иконки часто используются внутри кнопок, вкладок и уведомлений:

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

  <el-alert
    title="Информация"
    type="info"
    :icon="InfoIcon"
  />
</template>

<script>
import { Edit, InfoFilled } from '@element-plus/icons-vue';
import { ElButton, ElAlert } from 'element-plus';

export default {
  components: {
    ElButton, ElAlert,
    EditIcon: Edit,
    InfoIcon: InfoFilled
  }
};
</script>

Особенности:

  • В el-button можно использовать иконку через слот icon или атрибут icon.
  • В el-alert иконка заменяет стандартный символ типа уведомления.

Поддержка тем и цветовых схем

Element Plus позволяет изменять цвет иконок в зависимости от темы:

<template>
  <div :class="themeClass">
    <DeleteIcon />
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { Delete } from '@element-plus/icons-vue';

export default {
  components: { DeleteIcon: Delete },
  setup() {
    const darkMode = ref(true);
    const themeClass = computed(() => (darkMode.value ? 'dark-icon' : 'light-icon'));
    return { themeClass };
  }
};
</script>

<style>
.dark-icon svg { fill: white; }
.light-icon svg { fill: black; }
</style>

Полезные рекомендации

  • Для крупных проектов рекомендуется глобальная регистрация иконок с динамическим импортом.
  • Размер и цвет иконок следует задавать через CSS для максимальной гибкости.
  • Использование векторных иконок обеспечивает корректное отображение на любых разрешениях и устройствах.
  • Комбинирование с другими компонентами Element Plus позволяет создавать визуально согласованные интерфейсы.

Эти принципы делают компонент Icon универсальным инструментом для создания современного интерфейса на базе Element Plus.

Оглавление