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>