ElementIcon——多功能圖標庫

ElementIcon是一款UI框架element-ui的官方圖標庫，其中包含了一系列精美的圖標，可以在Web應用中廣泛應用。除此之外，ElementIcon不僅支持CDN引入，還提供了常用的SVG、Webfont、Symbol等多種格式，方便開發者根據需求自由選擇。

一、ElementIcon圖標

ElementIcon的圖標風格整潔簡約，邊框線條細膩，非常適合用於任何類型的網站或App。其中的每個圖標都有一個獨特的類名，可以非常方便地在項目中引用。

以下是一些常用圖標的代碼和效果：

//搜索圖標


//下載圖標


//刪除圖標

二、ElementIcon圖標如何CDN引入

ElementIcon提供多種方式引入圖標，其中較為方便的一種就是CDN引入。ElementIcon圖標可以通過jsDelivr或unpkg站點進行引入，代碼如下：

//jsDelivr引入


//unpkg引入

通過以上代碼，我們可以非常方便地引入ElementIcon圖標，從而在項目中使用它們。

三、SVG格式的ElementIcon圖標

除了Webfont格式，ElementIcon還提供SVG格式的圖標，開發者可以根據項目需要自由選擇。以下是一個引入SVG格式ElementIcon圖標的例子：

//引入element-ui的js和css
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

//在模板中引用svg組件和icon
<template>
  <div>
    <el-icon name="logo"></el-icon>
  </div>
</template>

//在JS中聲明
import { Icon } from 'element-ui';
Icon.register({
  'logo': {
    viewBox: '0 0 1024 1024',
    d: '...'
  }
});

通過以上方式，我們可以使用ElementIcon的SVG圖標，並將其引入到我們需要的地方。

四、Symbol格式的ElementIcon圖標

ElementIcon還可提供Symbol格式的圖標，可以通過在元素上添加class el-icon-[名稱] 來呈現 ElementIcon 的 Symbol 圖標。以下是一個使用Symbol格式ElementIcon的例子：

<!-- 通過鏈接– –>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入 ElementUI JS -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!-- 使用 -->
<i class="el-icon-success"></i>

在以上例子中，我們將引用ElementUI的相關庫，然後使用class el-icon-success引用了一個Symbol格式的ElementIcon圖標。該方式非常簡單易用，且可以通過添加不同的class來使用不同的圖標。

五、總結

ElementIcon具有多種使用方式和格式，可以極大地方便我們在開發UI時引用並使用多種類型的圖標。無論是Webfont格式、SVG格式還是Symbol格式，ElementIcon都可以提供高品質、高效率的圖標支持，讓我們在開發過程中輕鬆獲得更美觀的效果。