el‐icon 引用 - daniel-qa/Vue GitHub Wiki

el-icon 引用

#

一律使用 < script setup> 的語法，不然很麻煩

  • 安裝 icon 套件
npm install @element-plus/icons-vue

<template>
  <el-button @click="handleClick">
    <el-icon>
      <Plus />
    </el-icon>
    新增
  </el-button>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue';
  • 範例
<template>
  <p>
    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
    seconds, you can also override this
  </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"> Search </span>
  </el-button>
</template>
⚠️ **GitHub.com Fallback** ⚠️