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> | 需手动设置间距/样式 |
关键点补充
- 图标样式控制：通过 CSS 直接修改
font-size、color、cursor等属性 - 图标列表：所有图标名称可通过
@element-plus/icons-vue查看 - 版本兼容：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>
