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>