0

When I use element-plus to create an icon component, I use unplugin-icons and unplugin-auto-import to automatically import icons, for example I use <el-icon><i-ep-monitor />< /el-icon> to import an icon component. Now I have a requirement, I have an array which stores some strings like ['i-ep-avatar', 'i-ep-cellphone', 'i-ep-apple'], now what can I pass The method converts the strings in this array into components and dynamically adds them to the vue template. I hope to get your help.

<template>
  <el-icon>
    <i-ep-monitor />
  </el-icon>
</template>

When I write like this, it can be imported normally

    <template>
      <el-icon>
       {How should I dynamically generate a component like <i-ep-monitor /> from the string content in the array?}
      </el-icon>
    </template>
zzw6df7
  • 1

1 Answers1

0

You can use <component> for that

details: https://vuejs.org/api/built-in-special-elements.html#component

example:

<template>
  <el-icon>
    <component :is="myIcon"/>
  </el-icon>
</template>

where myIcon would return a string like i-ep-monitor

Daniel
  • 34,125
  • 17
  • 102
  • 150