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>
  

---

使用方式总结表格

方式	适用场景	代码示例	注意事项
按需引入	少量图标需求	import { Edit } from '@element-plus/icons-vue';	需逐个导入，适合小项目
全局注册	大量图标需求	入口文件循环注册所有图标组件	可能增加打包体积
动态绑定	需要动态切换图标	<component :is="currentIcon" />	需通过变量控制图标类型
自定义图标	需要专属图标	自定义 SVG 组件并导入	需自行设计图标路径
组合图标	需要多个图标组合	<el-icon><Edit /><Check /></el-icon>	需手动设置间距/样式

---

关键点补充

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 + Vitestarter</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>