Element-Ui组件（icon组件）

一、前言

本篇文章主要是对官网的Icon组件进行总结归纳Icon 图标 | Element Plus

        在现代Web应用开发中，图标是用户界面设计中不可或缺的一部分。它们不仅提升了用户体验，还使得信息的传达更加直观和高效。本文主要对Element Plus 官方提供的Icon组件进行了总结和归纳。Element Plus 是一个基于 Vue 3 的组件库，提供了丰富的UI组件，帮助开发者快速构建美观且功能完备的应用程序。

1. 基本使用方法

Element Plus 的 Icon 组件可以通过 el-icon 标签直接使用。例如：

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

<script>
import { Edit, Delete } from '@element-plus/icons-vue' // 导入内置图标

export default {
  components: {
    Edit,
    Delete
  }
}
</script>

大家可以从下面查看ElementUI提供的组件库 

如何使用呢？

直接点击一下就以及负责代码了

2. 内置图标库

Element Plus 提供了一系列内置图标，涵盖了常用的功能和操作。这些图标可以直接通过导入并使用。例如：

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

<script>
import { Edit, Delete } from '@element-plus/icons-vue' // 导入内置图标

export default {
  components: {
    Edit,
    Delete
  }
}
</script>

 就可以直接引用到代码中进行使用了

3. 自定义图标

除了内置图标，Element Plus 还支持自定义图标的引入和使用。你可以通过以下步骤来使用自定义图标：

1. 引入自定义图标字体或 SVG 文件。
2. 在组件中进行注册和使用。

例如：

     首先先画一个图标

<template>
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-11h-2v3H8v2h3v3h2v-3h3v-2h-3V9z"/>
  </svg>
</template>

<style scoped>
svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

在main.js中注册图标 

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import CustomIcon from './components/icon1.vue'; // 导入自定义图标

const app = createApp(App);

app.use(ElementPlus);
app.component('CustomIcon', CustomIcon); // 全局注册自定义图标

app.mount('#app');

引用 

<template>
  <div>
    <el-icon><custom-icon /></el-icon>
  </div>
</template>

<script>
import CustomIcon from './path/to/custom-icon.vue' // 导入自定义图标

export default {
  components: {
    CustomIcon
  }
}
</script>

下面是效果图 

4. 图标大小和颜色

Element Plus 的 Icon 组件支持通过 size 和 color 属性来调整图标的大小和颜色。例如

<template>
  <div>
    <el-icon :size="24"><Edit /></el-icon>
    <el-icon color="red"><Delete /></el-icon>
  </div>
</template>

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

export default {
  components: {
    Edit,
    Delete
  }
}
</script>

5. 图标旋转和动画

Element Plus 还支持通过 rotate 和 spin 属性来实现图标的旋转和动画效果。例如：

<template>
  <div>
    <el-icon :rotate="45"><Edit /></el-icon>
    <el-icon :spin="true"><Loading /></el-icon>
  </div>
</template>

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

export default {
  components: {
    Edit,
    Loading
  }
}
</script>

6. 图标组合使用

在实际开发中，常常需要将多个图标组合使用，以实现更复杂的功能或布局。Element Plus 提供了灵活的组件结构，可以轻松实现图标的组合使用。

例如：

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

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

export default {
  components: {
    Edit,
    Delete
  }
}
</script>

7. 使用场景

Element Plus 的 Icon 组件适用于多种场景，包括但不限于：

• 按钮图标
• 导航栏图标
• 表单图标
• 提示和警告图标
• 自定义功能的图标

总结

通过本文的总结和归纳，我们可以看到 Element Plus 的 Icon 组件是一个功能强大且灵活的工具，适用于各种复杂的图标需求。无论是简单的内置图标使用，还是复杂的自定义图标管理，Element Plus 都提供了完善的解决方案。希望本文能帮助你更好地理解和使用 Element Plus 的 Icon 组件，提升你的开发效率和用户体验。