<template>
  <div class="icon-demo">
    <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>
    <div class="icon-row">
      <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>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Delete, Edit, Loading, Search, Share } from '@element-plus/icons-vue'
</script>

<style scoped>
.icon-demo p {
  margin: 0 0 1rem;
}
.icon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
</style>
