Element Plus 图标使用方式整理

Element Plus 图标使用方式整理

以下是 Element Plus 图标的所有使用方式，包含完整代码示例和总结表格：

1. 按需引入图标组件

• 适用场景：仅需少量图标时，按需导入减少打包体积

• 示例代码：

  <template>
    <div>
      <!-- 直接使用导入的图标组件 -->
      <Edit class="icon" />
      <Delete @click="handleClick" />
    </div>
  </template>
  
  <script setup>
  import { Edit, Delete } from '@element-plus/icons-vue';
  
  const handleClick = () => {
    console.log('图标被点击');
  };
  </script>
  
  <style>
  .icon {
    font-size: 24px;
    cursor: pointer;
  }
  </style>
  

• 注释说明：

  • 通过 @element-plus/icons-vue 按需导入图标组件
  • 在 <script setup> 中导入并直接在模板中使用
  • 支持绑定点击事件等原生属性

2. 全局注册所有图标

• 适用场景：项目需频繁使用大量图标时
• 示例代码：

  // main.js
  import { createApp } from 'vue';
  import App from './App.vue';
  import * as ElementPlusIconsVue from '@element-plus/icons-vue';
  import ElementPlus from 'element-plus';
  
  const app = createApp(App);
  app.use(ElementPlus);
  
  // 全局注册所有图标
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
  }
  
  app.mount('#app');
  

  <!-- 组件中直接使用 -->
  <template>
    <Search class="global-icon" />
    <InfoFilled />
  </template>

• 注意事项：
  • 会引入所有图标，可能增加打包体积
  • 需在入口文件全局注册

3. 动态绑定图标（通过变量）

• 适用场景：需要动态切换图标时
• 示例代码：

  <template>
    <component :is="currentIcon" class="dynamic-icon" />
    <button @click="toggleIcon">切换图标</button>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { Edit, Check } from '@element-plus/icons-vue';
  
  const currentIcon = ref(Edit);
  
  const toggleIcon = () => {
    currentIcon.value = currentIcon.value === Edit ? Check : Edit;
  };
  </script>
  

4. 自定义图标

• 适用场景：需使用项目专属图标时
• 示例代码：

  <!-- 自定义图标组件 CustomIcon.vue -->
  <template>
    <svg class="custom-icon" viewBox="0 0 1024 1024">
      <!-- 自定义路径 -->
      <path d="M512 1024c-282.2 0-512-229.8-512-512s229.8-512 512-512 512 229.8 512 512-229.8 512-512 512z"/>
    </svg>
  </template>
  
  <!-- 使用自定义图标 -->
  <template>
    <CustomIcon class="custom-style" />
  </template>
  
  <script setup>
  import CustomIcon from './CustomIcon.vue';
  </script>
  

5. 组合图标（Element Plus 2.3+）

• 适用场景：需要组合多个图标时
• 示例代码：

  <template>
    <el-icon class="combined-icon">
      <Edit />
      <Check />
    </el-icon>
  </template>
  
  <style>
  .combined-icon .el-icon__inner {
    margin-right: 8px;
  }
  </style>
  

使用方式总结表格

关键点补充

1. 图标样式控制：通过 CSS 直接修改 font-size、color、cursor 等属性
2. 图标列表：所有图标名称可通过 @element-plus/icons-vue 查看
3. 版本兼容：Element Plus 2.x+ 推荐使用 SVG 图标，旧版字体图标已弃用

如果需要进一步优化或扩展某个用法，可以随时提出！

扩展

在按钮上加图标和直接使用图标

完整代码例子

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>
  <div>1234567890</div>
  <el-button icon="Edit">Default</el-button>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button icon="Close" type="danger">Danger</el-button>
  <el-icon>
    <Edit />
  </el-icon>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
    starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">Vue Docs Scaling up Guide</a>.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>