ElementPlus Icon 圖標(biāo)

Icon 圖標(biāo)

提供了一套常用的圖標(biāo)集合。

Element Plus 團(tuán)隊(duì)正在將原有組件內(nèi)的 Font Icon 向 SVG Icon 遷移，請(qǐng)多多留意 ChangeLog, 及時(shí)獲取到更新信息，F(xiàn)ont Icon 將會(huì)在第一個(gè)正式發(fā)布被廢棄，請(qǐng)盡快遷移

SvgIcon 使用方法

• 如果你想像用例一樣直接使用，你需要全局注冊(cè)組件，才能夠直接在項(xiàng)目里使用。
• 若想查看所有的組件，請(qǐng)?jiān)L問 @element-plus/icons 和源代碼 Github/ElementPlus/icons，或者  SVG 圖標(biāo)集合

安裝圖標(biāo)

當(dāng)前的圖標(biāo)只適用于 Vue3。

使用 yarn

$ yarn add @element-plus/icons

使用 npm

$ npm install @element-plus/icons

基礎(chǔ)用法

<!-- 用 el-icon 為 SVG 提供屬性 -->
<el-icon :size="size" :color="color">
  <edit />
</el-icon>
<!-- 或者單獨(dú)使用，不從祖先節(jié)點(diǎn)繼承任何屬性 -->
<edit />

<script lang="ts">
  import { Edit } from '@element-plus/icons'

  export default defineComponent({
    components: {
      // 全名
      [Edit.name]: Edit,
      // 或者以縮寫的方式,
      Edit,
    },
  })
</script>

結(jié)合

通過添加額外的類名 ?is-loading?，你的圖標(biāo)就可以在 2 秒內(nèi)旋轉(zhuǎn) 360 度，但讓你也可以自己改寫想要的動(dòng)畫。

el-icon 為 raw SVG 圖標(biāo)提供額外的屬性, 提供的詳細(xì)屬性請(qǐng)繼續(xù)閱讀

<template>
  <p>
  通過添加額外的類名 <b>is-loading</b>，你的圖標(biāo)就可以在 2 秒內(nèi)旋轉(zhuǎn) 360
  度，但讓你也可以自己改寫想要的動(dòng)畫。
</p>
<el-icon :size="20">
  <edit />
</el-icon>
<el-icon color="#409EFC" class="no-inherit">
  <share />
</el-icon>
<el-icon>
  <delete />
</el-icon>
<el-icon class="is-loading">
  <loading />
</el-icon>
<el-button type="primary">
  <el-icon style="vertical-align: middle;">
    <search />
  </el-icon>
  <span style="vertical-align: middle;"> 搜索 </span>
</el-button>
</template>

直接使用 SVG icon

<template>
  <div style="font-size: 20px;">
  <!-- SVG icon 自身不帶任何屬性，你需要額外提供屬性。-->
  <edit style="width: 1em; height: 1em; margin-right: 8px;" />
  <share style="width: 1em; height: 1em; margin-right: 8px;" />
  <delete style="width: 1em; height: 1em; margin-right: 8px;" />
  <search style="width: 1em; height: 1em; margin-right: 8px;" />
</div>
</template>

SVG 圖標(biāo)集合

?el-icon (包裹組件)? 更新于 ElementPlus@1.0.2-beta.66，適用于 1.0.2-beta.66(包含 66) 以后的版本，你只能在該版本之后的版本使用 ?el-icon?。
SVG 圖標(biāo)可以在任意版本使用。
點(diǎn)擊圖標(biāo)可復(fù)制到剪貼板。

Font Icon 使用方法

直接通過設(shè)置類名為 el-icon-iconName 來使用即可。例如：

<template>
  <i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</template>

SvgIcon 屬性