EL-Icon：为Vue打造的全能图标库

一、基本介绍

EL-Icon是一款专为Vue.js打造的全能图标库，提供了大量现成的图标以及可以自定义图标，可以轻松地嵌入到Vue项目中。

EL-Icon提供了多种单色、多色以及单色多色混搭的图标风格，不仅如此，对于每种风格，还提供了多种大小以及旋转角度的图标。

在使用EL-Icon之前，需要先安装它：

npm i element-ui -S

接下来，在Vue项目的入口文件中引入EL-Icon:

import Vue from 'vue'
import ElementUI from 'element-ui'

Vue.use(ElementUI)

引入之后即可在Vue组件中使用EL-Icon提供的各种图标。

二、使用方法

1、使用单色图标

使用单色图标非常简单，只需要在组件中使用<el-icon>标签并设置其中的class属性即可，icon-class属性即为单色图标的名称，可以在EL-Icon的官方文档中查看所有单色图标的名称。

  <template>
    <div>
      <el-icon class="single-icon" icon-class="el-icon-edit"></el-icon>
    </div>
  </template>

  <style>
    .single-icon{
      font-size: 30px;
      color: #409eff;
    }
  </style>

其中，通过font-size和color设置图标的大小和颜色。

2、使用多色图标

使用多色图标和使用单色图标基本相同，只需在class中添加is-multicolor即可。

  <template>
    <div>
      <el-icon class="multi-icon" icon-class="el-icon-more is-multicolor"></el-icon>
    </div>
  </template>

  <style>
    .multi-icon{
      font-size: 30px;
    }
  </style>

注：多色图标的大小和颜色可以在CSS中任意设置，不会影响图标的显示。

3、使用单色多色混搭图标

使用单色多色混搭图标同样非常简单，只需要在class中同时添加is-single-color和is-multicolor即可。

  <template>
    <div>
      <el-icon class="mixed-icon" icon-class="el-icon-star is-single-color is-multicolor"></el-icon>
    </div>
  </template>

  <style>
    .mixed-icon{
      font-size: 30px;
      color: #67c23a;
    }
  </style>

三、其他使用方法

1、设置图标大小

除了在CSS样式中设置，还可以直接在<el-icon>标签中设置font-size属性改变图标大小。

  <template>
    <div>
      <el-icon class="single-icon-size" icon-class="el-icon-edit" :style="{fontSize: '50px'}"></el-icon>
    </div>
  </template>

  <style>
    .single-icon-size{
      color: #409eff;
    }
  </style>

2、旋转图标

可以使用一些特殊的class属性来旋转图标，如： el-icon--rotate-90旋转90度，el-icon--rotate-180旋转180度以及el-icon--rotate-270旋转270度。

  <template>
    <div>
      <el-icon class="rotate-icon el-icon--rotate-90" icon-class="el-icon-edit"></el-icon>
    </div>
  </template>

  <style>
    .rotate-icon{
      font-size: 30px;
      color: #67c23a;
    }
  </style>

使用以上特殊class属性时，不需要在class中添加is-multicolor和is-single-color属性，使用时直接添加即可。

总结

EL-Icon提供了非常简单而且实用的图标库，可以在各种Vue组件中使用，快速提升了UI设计的效率。

本文详细介绍了EL-Icon的使用方法以及其他一些注意事项，希望对广大开发者有所帮助。

完整的代码示例：

  <!-- 单色图标 -->
  <template>
    <div>
      <el-icon class="single-icon" icon-class="el-icon-edit"></el-icon>
    </div>
  </template>

  <style>
    .single-icon{
      font-size: 30px;
      color: #409eff;
    }
  </style>

  <!-- 多色图标 -->
  <template>
    <div>
      <el-icon class="multi-icon" icon-class="el-icon-more is-multicolor"></el-icon>
    </div>
  </template>

  <style>
    .multi-icon{
      font-size: 30px;
    }
  </style>

  <!-- 单色多色混搭图标 -->
  <template>
    <div>
      <el-icon class="mixed-icon" icon-class="el-icon-star is-single-color is-multicolor"></el-icon>
    </div>
  </template>

  <style>
    .mixed-icon{
      font-size: 30px;
      color: #67c23a;
    }
  </style>

  <!-- 设置图标大小 -->
  <template>
    <div>
      <el-icon class="single-icon-size" icon-class="el-icon-edit" :style="{fontSize: '50px'}"></el-icon>
    </div>
  </template>

  <style>
    .single-icon-size{
      color: #409eff;
    }
  </style>

  <!-- 旋转图标 -->
  <template>
    <div>
      <el-icon class="rotate-icon el-icon--rotate-90" icon-class="el-icon-edit"></el-icon>
    </div>
  </template>

  <style>
    .rotate-icon{
      font-size: 30px;
      color: #67c23a;
    }
  </style>