图标（Icon）

Element-UI 提供了一套简单易用的图标系统，方便在项目中快速集成和使用图标。图标组件使用字体图标的方式呈现，具有良好的兼容性和轻量级的优点。

提示

图标（Icon）官方文档：https://element.eleme.cn/#/zh-CN/component/icon (opens new window)

1. 基本使用

在项目中使用图标非常简单，只需在模板中添加 <i> 标签，并为其设置合适的图标类名。

使用步骤

1. 引入样式文件（如果未自动引入）：

   通常情况下，使用 Element-UI 时，样式文件会自动引入。如果未引入，可以在项目的入口文件中手动引入：

   import 'element-ui/lib/theme-chalk/index.css';
   

2. 在模板中使用图标：

   使用 <i> 标签和对应的图标类名来呈现图标。

   <template>
     <div>
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
     </div>
   </template>
   

2. 图标类名

图标类名以 el-icon- 开头，后面跟随图标的名称。以下是一些常用的图标类名示例：

• 基本图标：

  • el-icon-edit：编辑图标
  • el-icon-delete：删除图标
  • el-icon-share：分享图标
  • el-icon-search：搜索图标
  • el-icon-star-off：空星图标

• 方向图标：

  • el-icon-arrow-left：左箭头
  • el-icon-arrow-right：右箭头
  • el-icon-arrow-up：上箭头
  • el-icon-arrow-down：下箭头

• 提示图标：

  • el-icon-warning：警告图标
  • el-icon-info：信息图标
  • el-icon-success：成功图标
  • el-icon-error：错误图标

3. 图标样式调整

在 Element-UI 中，图标使用字体图标呈现，可以通过 CSS 样式调整图标的大小、颜色、旋转等视觉效果。

使用自定义类名进行样式调整

1. 添加自定义类名：

   为特定图标的 <i> 标签添加自定义类名。这使你可以在需要调整样式的地方，单独为图标定义样式，而不影响其他位置的相同图标。

   <template>
     <div>
       <i class="el-icon-edit icon-large"></i> <!-- 添加自定义类名 -->
       <i class="el-icon-share icon-red"></i>  <!-- 添加自定义类名 -->
       <i class="el-icon-delete icon-rotate"></i> <!-- 添加自定义类名 -->
       <i class="el-icon-edit"></i> <!-- 不需要样式调整的图标 -->
     </div>
   </template>
   

2. 定义样式：

   使用 CSS 为这些类名定义样式。这可以确保样式只应用于需要调整的图标，而其他地方使用的相同图标不受影响。

   <style scoped>
   .icon-large {
     font-size: 24px; /* 增大图标尺寸 */
   }
   
   .icon-red {
     color: red; /* 修改图标颜色 */
   }
   
   .icon-rotate {
     transform: rotate(45deg); /* 旋转图标 */
   }
   </style>
   

为什么使用自定义类名？

• 样式隔离：通过自定义类名，可以确保特定样式仅应用于某个特定位置的图标，而不影响其他位置相同图标的默认样式。

• 灵活性：可以针对不同需求，为同一类型的图标在不同位置定义不同的样式，满足多样化的视觉要求。

• 可维护性：使用自定义类名使样式更易于管理和维护，减少全局样式冲突的风险。

假设您在一个组件中多次使用同一个图标，但某些位置需要更大尺寸或不同颜色：

<template>
  <div>
    <i class="el-icon-edit icon-large"></i> <!-- 需要大尺寸 -->
    <i class="el-icon-edit icon-red"></i> <!-- 需要红色 -->
    <i class="el-icon-edit"></i> <!-- 默认样式 -->
  </div>
</template>

<style scoped>
.icon-large {
  font-size: 24px;
}

.icon-red {
  color: red;
}
</style>

在这个示例中，icon-large 和 icon-red 类名使我们能够在不影响默认图标的情况下，灵活地为图标定义不同的视觉效果。

总结

• 自定义类名的重要性：通过为图标添加自定义类名，您可以灵活地控制图标样式，只影响特定位置的图标。
• 样式调整的便捷性：可以轻松调整图标的大小、颜色、旋转等样式，而无需修改全局样式。
• 提高组件可维护性：这种方法使得样式更容易管理，并减少潜在的样式冲突。

4. 自定义图标

如果需要使用自定义图标，可以通过引入第三方字体图标库或使用 SVG 图标实现。

使用第三方字体图标

1. 引入第三方字体图标库（例如 Font Awesome）：

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   

2. 在模板中使用自定义图标：

   <template>
     <div>
       <i class="fas fa-camera"></i> <!-- Font Awesome 图标 -->
       <i class="fas fa-heart"></i>  <!-- Font Awesome 图标 -->
     </div>
   </template>
   

使用 SVG 图标

1. 在项目中创建 SVG 文件：

   创建一个 icons 文件夹，并将 SVG 文件存放在该文件夹中。

2. 在组件中使用 SVG：

   <template>
     <div>
       <svg class="custom-icon">
         <use xlink:href="#icon-example"></use> <!-- 使用定义的 SVG 图标 -->
       </svg>
     </div>
   </template>
   
   <style scoped>
   .custom-icon {
     width: 24px;
     height: 24px;
     fill: currentColor;
   }
   </style>
   

   注意：需要在项目中引入合适的工具（如 svg-sprite-loader）来支持 SVG 图标的使用。

5. 总结

• Element-UI 图标使用简便：通过简单的类名即可快速集成各种图标。
• 样式调整灵活：支持通过 CSS 调整图标的大小、颜色等属性。
• 自定义图标支持：可以通过第三方字体图标库或 SVG 图标实现自定义图标集成。