Element Plus的el-icon怎么用
在 Vue 生態(tài)里， Element UI 是排名前列的組件庫。 在 Vue 發(fā)布到 3.0 時，Element 也發(fā)布了對應的組件庫。也就是 Element Plus 。隨之而來的用法也跟著變了。
比如本文要講的 el-icon 的用法。
在 Element Plus 里，Icon 圖標 的用法和以前不一樣了。雖然官方文檔也有說明怎么用，但不是非常詳細，可能會給新手帶來一丟丟障礙。
本文將花幾分鐘的時間講解 el-icon 幾種用法和注意事項。
注意：需要留意本文發(fā)表時間與使用的 Element Plus 版本，隨著時間的推移可能會出現(xiàn)使用上的差異。
- vue: ^3.2.25
- element-plus: ^2.1.7
- @element-plus/icons-vue: ^1.1.4
初步了解
Icon 在 Element UI 和 Element Plus 用法上的差別
在 vue2 + Element UI 的用法
<i class="el-icon-edit"></i>
在 vue3 + Element Plus 的用法
<ElIcon :size="30" color="hotpink"> <edit /> </ElIcon> <!-- 也可以直接使用圖標標簽，無需父標簽包裹 --> <edit />
個人覺得，Element UI 的用法會更加簡單。
下一篇文章我會講解如何在 Element Plus 的基礎上二次封裝出一個更好用的 Icon組件 。
Icon 在 Element Plus 中的使用邏輯
Element Plus 拋棄了字體圖標的用法，直接使用了 svg 的方式。
可以說，圖標這個東西被拎出來單獨維護了。所以在使用前必須把 svg圖標庫 下載下來。
下載 svg圖標庫 的命令：
npm install @element-plus/icons-vue
你也可以使用 Yarn 或 pnpm 的方式下載
# Yarn yarn add @element-plus/icons-vue # pnpm pnpm install @element-plus/icons-vue
使用的方式有2種，一種是直接使用 svg，另一種是配合 el-icon 標簽一起使用。
接下來就分別講講這兩種使用方式（全局和局部引入都會講到）
只使用 svg
如果你只需使用 Element Plus 提供的 svg圖標庫 的話，是可以不安裝 Element Plus 的。不過這種場景應該很少出現(xiàn)。
安裝命令：
npm install @element-plus/icons-vue
Element Plus 提供的 svg圖標 種類可以到 圖標集合 里查看。
通過 svg組件 的方式使用圖標，如需設置圖標大小和顏色，都需要通過 css 來設置。
全局引入
全部引入的方式會將所有 svg組件 都注冊到全局，用的時候比較方便，但會犧牲一點性能。
main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as Icons from '@element-plus/icons-vue' // 引入所有圖標，并命名為 Icons
const app = createApp(App)
// 通過遍歷的方式注冊所有 svg組件，會犧牲一點點性能
for (let i in Icons) {
app.component(i, Icons[i])
}
app.mount('#app')如果你不想全部引入，只是想在全局注冊某個 svg圖標組件，可以用以下方式在 main.js 里注冊（我以 Edit 圖標為例）
/* 省略部分代碼 */
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 圖標
const app = createApp(App)
app.component(Edit.name, Edit) // 全局注冊 Edit 圖標
app.mount('#app')在頁面中使用
<template>
<div>
<edit />
</div>
</template>
<style>
svg {
width: 40px;
height: 40px;
color: red;
}
</style>
局部引入
局部引入的方式只需在使用的地方引入即可。
<template>
<div>
<edit />
</div>
</template>
<script setup>
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 這個 svg組件
</script>
<style>
svg {
width: 40px;
height: 40px;
color: red;
}
</style>配合 el-icon 一起使用
Element Plus 還提供了 el-icon 組件用來包裹 svg圖標組件 ，使得設置圖標大小和顏色更加方便。
但需要在項目中安裝 Element Plus ，安裝命令如下：
# 選擇其中一種方式安裝即可。 # NPM npm install element-plus --save # Yarn yarn add element-plus # pnpm pnpm install element-plus
安裝完 Element Plus 后，可以在全局引入，也可以局部引入。
全局引入
main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 圖標
import App from './App.vue'
const app = createApp(App)
app.component(Edit.name, Edit) // 全局注冊 Edit 圖標
app
.use(ElementPlus)
.mount('#app')在頁面中使用
<el-icon :size="20" color="hotpink"> <edit /> </el-icon>
此時，在 el-icon 上設置 size 和 color 就能控制 svg圖標 的大小和顏色。
需要注意的是 size 屬性必須傳數(shù)字，不能傳字符串進去！
局部引入
<template>
<div>
<el-icon :size="30" color="hotpink">
<edit />
</el-icon>
</div>
</template>
<script setup>
import { ElIcon } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
import 'element-plus/es/components/icon/style/css'
</script>局部引入的話，我們只需要引入 icon 對應的 css 即可。
如果你在 main.js 引入了 element-plus/dist/index.css 就不需要在頁面再引入 element-plus/es/components/icon/style/css 。
到此這篇關于Element Plus的el-icon怎么用的文章就介紹到這了,更多相關Element Plus el-icon內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue實現(xiàn)登錄數(shù)據(jù)的持久化的使用示例
在Vue.js中,實現(xiàn)登錄數(shù)據(jù)的持久化需要使用瀏覽器提供的本地存儲功能,Vue.js支持使用localStorage和sessionStorage來實現(xiàn)本地存儲,本文就來介紹一下如何實現(xiàn),感興趣的可以了解一下2023-10-10
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)雙擊放大預覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細介紹了vuedraggable實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
今天小編就為大家分享一篇element-ui中的select下拉列表設置默認值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
reactive是Vue 3的Composition API中的一個函數(shù),它允許你創(chuàng)建一個響應式的數(shù)據(jù)對象,本文主要介紹了深入理解Vue.js3中Reactive的實現(xiàn),感興趣的可以了解一下2024-01-01
這篇文章主要介紹了Vue前端整合Element?Ui,本節(jié)內(nèi)容服務于SpringBoot?+?Vue?搭建?JavaWeb?增刪改查項目，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
本篇文章主要介紹了Vue.js組件，組件系統(tǒng)是Vue.js其中一個重要的概念，具有一定的參考價值，有需要的可以了解一下。2016-12-12
Vue 實現(xiàn)v-for循環(huán)的時候更改 class的樣式名稱
這篇文章主要介紹了Vue 實現(xiàn)v-for循環(huán)的時候更改 class的樣式名稱，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue 前端導出后端返回的excel文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue axios獲取token臨時令牌封裝案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09