Vue3+TS使用element-plus 動態Icon圖標

目錄

• 1，前言
• 2，使用
  • 2.1，方式一
  • 2.2，方式二

1，前言

---

源於一段話

Element Plus 團隊正在將原有組件內的 Font Icon 向 SVG Icon 遷移，請多多留意更新日志, 及時獲取到更新信息，Font Icon 將會在第一個正式發布被廢棄，請盡快遷移

在此記錄一下如何使用element-plus中的icon組件

環境：

• Vue：3.2.16
• Element-Plus：1.2.0-beta.3
• TypeScript：4.4.3
• Vite：2.6.4

2，使用

---

文檔原話：如果你想像用例一樣直接使用，你需要全局注冊組件，才能夠直接在項目里使用

在main.ts中先導入

import * as Icons from '@element-plus/icons'

2.1，方式一

---

在main.ts中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store, key } from './store'
import * as Icons from '@element-plus/icons'

const app = createApp(App)
app.use(store, key)
app.use(router)
app.mount('#app')

// 注冊全局組件
Object.keys(Icons).forEach(key => {
  app.component(key, Icons[key as keyof typeof Icons])
})

在xxx.vue文件中

// html
<template>
   <el-icon :size="20"><alarm-clock /></el-icon>
</template>

或使用動態組件

// html
<template>
  <component class="xxx" :is="iconName"></component>
</template>

// script
export default {
  name: 'Login',
  setup() {
    const iconName = 'Search'
    return {
      iconName
    }
  }
}

2.2，方式二

---

在main.ts中

import { createApp, createVNode } from 'vue'
import App from './App.vue'
import router from './router'
import { store, key } from './store'
import * as Icons from '@element-plus/icons'

const app = createApp(App)
app.use(store, key)
app.use(router)
app.mount('#app')

// 創建Icon組件
const Icon = (props: { icon: string }) => {
  const { icon } = props
  return createVNode(Icons[icon as keyof typeof Icons])
}
// 注冊Icon組件
app.component('Icon', Icon)

使用動態組件

// html
<template>
  <Icon class="xxx" :icon="iconName"></Icon>
</template>

// script
export default {
  name: 'Login',
  setup() {
    const iconName = 'Search'
    return {
      iconName
    }
  }
}

---

如果看了覺得有幫助的，我是@上進的鵬多多，歡迎 點贊 關注 評論；END

---

PS：在本頁按F12，在console中輸入document.querySelectorAll('.diggit')[0].click()，有驚喜哦

---

公眾號

往期文章

• 助你上手Vue3全家桶之Vue-Router4教程
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• 超詳細！Vue-Router手把手教程
• vue中利用.env文件存儲全局環境變量，以及配置vue啟動和打包命令
• 微信小程序實現搜索關鍵詞高亮
• 超詳細！Vue的九種通信方式
• 超詳細！Vuex手把手教程

個人主頁

• CSDN
• GitHub
• 簡書
• 博客園
• 掘金