el-icon详解

基本用法

el-icon 组件允许在项目中使用 Element Plus 提供的各种图标。你可以通过导入特定的图标组件来使用图标。

<template>
  <el-icon><Edit /></el-icon>
</template>

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

图标库

Element Plus 提供了大量的图标，你可以从官方图标库中选择合适的图标。以下是一些常用的图标示例：

• Edit
• Search
• Delete
• Plus

......

导入图标

可以按需导入单个图标，或者一次性导入所有图标。

按需导入

<template>
  <el-icon><Edit /></el-icon>
  <el-icon><Search /></el-icon>
</template>

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

一次性导入所有图标

<template>
  <el-icon><Edit /></el-icon>
  <el-icon><Search /></el-icon>
</template>

<script setup>
import * as Icons from '@element-plus/icons-vue';
</script>

属性 (Props)

el-icon 组件支持以下属性：

• size

  • 描述: 图标的大小。

  • 示例:

    vue
    深色版本
    <template>
      <el-icon size="20"><Edit /></el-icon>
    </template>
    

• color

  • 描述: 图标的颜色。

  • 默认: 当前文本颜色

  • 示例:

    <template>
      <el-icon color="#ff0000"><Edit /></el-icon>
    </template>
    

示例代码

基本用法

<template>
  <el-icon><Edit /></el-icon>
  <el-icon><Search /></el-icon>
</template>

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

设置图标大小和颜色

<template>
  <el-icon size="20" color="#00ff00"><Edit /></el-icon>
  <el-icon size="24" color="#0000ff"><Search /></el-icon>
</template>

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

使用多个图标

<template>
  <el-icon><Edit /></el-icon>
  <el-icon><Search /></el-icon>
  <el-icon><Delete /></el-icon>
</template>

<script setup>
import { Edit, Search, Delete } from '@element-plus/icons-vue';
</script>

动态设置图标

<template>
  <el-icon :size="iconSize" :color="iconColor"><Edit /></el-icon>
</template>

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

const iconSize = ref(20);
const iconColor = ref('#ff0000');
</script>

常见问题

如何改变图标的颜色？

可以通过 color 属性来改变图标的颜色。例如：

<template>
  <el-icon color="#ff0000"><Edit /></el-icon>
</template>

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

如何改变图标的大小？

可以通过 size 属性来改变图标的大小。例如：

<template>
  <el-icon size="20"><Edit /></el-icon>
</template>

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

如何动态设置图标？

可以使用 Vue 的响应式数据绑定来动态设置图标。例如：

<template>
  <el-icon :size="iconSize" :color="iconColor"><Edit /></el-icon>
</template>

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

const iconSize = ref(20);
const iconColor = ref('#ff0000');
</script>