1，使用
文档原话：如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用
在main.ts中先导入
import * as Icons from '@element-plus/icons'
.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 => {ponent(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>// scriptexport 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 } = propsreturn createVNode(Icons[icon as keyof typeof Icons])}// 注册Icon组件ponent('Icon', Icon)
使用动态组件
// html<template><Icon class="xxx" :icon="iconName"></Icon></template>// scriptexport default {name: 'Login',setup() {const iconName = 'Search'return {iconName}}}
原文链接：/pdd11997110103/article/details/121440220
