Element Plus的el-icon怎麼用

2022-04-17 13:00:16

初步瞭解

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 的。不過這種場景應該很少出現。

安裝命令：

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 屬性必須傳數位，不能傳字串進去！

區域性引入

<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內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！