el‐icon - daniel-qa/Vue GitHub Wiki

el-icon

直接在标签内部嵌套图标组件（如 < ArrowRight />

<template>
  <div>
    <el-button type="primary" @click="onClick">
      <el-icon>
        <ArrowRight />
      </el-icon>
      下一步
    </el-button>
  </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue';

function onClick() {
  console.log('按钮点击了');
}
</script>

在按钮中插入图标

<template>
  <div>
    <el-button type="primary" icon="Search" @click="onSearch">
      搜索
    </el-button>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';

function onSearch() {
  console.log('搜索按钮被点击');
}
</script>

常用

移除

CloseBold  : (打 X )
Plus       : (加號 + )

small
medium
large

<el-button size="small" @click="removeSchool(index)">
	<el-icon>
		<CloseBold />
	</el-icon>
</el-button>

function removeSchool(index) {
  showData.value.splice(index, 1); // 移除指定索引的学校
  console.log('移除学校:', index);
}

設定 icon 顏色

在 Element Plus 中，el-icon 是支持通过 CSS 来设置颜色的。你可以直接在 el-icon 的 style 属性或者通过添加类名来改变图标的颜色。

  <el-icon><CirclePlusFilled /></el-icon>
  <i class="el-icon-caret-bottom" style="color: red"/>
  <i class="el-icon-caret-top" style="color: green"/>

<template>
  <el-icon :style="{ color: 'red' }">
    <home />
  </el-icon>
</template>

<script setup>
import { Home } from '@element-plus/icons-vue'
</script>

使用自定义类

<template>
  <el-icon class="custom-icon">
    <home />
  </el-icon>
</template>

<script setup>
import { Home } from '@element-plus/icons-vue'
</script>

<style>
.custom-icon {
  color: blue;
}
</style>

⚠️ GitHub.com Fallback ⚠️