Element-plus图标封装

按需加载并方便使用,不需要在每个页面单独引入Icon
按需加载配置详见

安装依赖

npm install @element-plus/icons-vue

utils/icon.ts

import { createVNode } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

interface EIconInf{
  type: string,
  size?: number,
  color?: string,
  cursor?: boolean
}

export const EIcon = (props: EIconInf) => {
  const { type, size=20, color='', cursor=true } = props
  const EIcon: { [key: string]: any } = ElementPlusIconsVue
  return createVNode(
    EIcon[type],
    {
      style:{
        width: `${size}px`, 
        color: color ? color : 'inherit', 
        cursor: cursor ? 'pointer' : 'none',
      }
    }
  )
}

在main.js中引入并注册

import { EIcon } from './utils/icon'
...
//注册EIcon组件
app.component('EIcon', EIcon)

页面使用

<template>
  <div>
    <e-icon type="House"></e-icon>
  </div>
</template>