小郎君

首页归档瞬间关于

element-plus-icons踩坑

2022-03-10

前言

最近在练习vue3 项目时使用element-plus推荐的自动导入方式安装图标库，没想到踩了两个坑。

遇到的问题

  1. 只安装 unplugin-icons 和 unplugin-auto-import 无法使用，还需安装 @iconify-json/ep ，另外使用图标时需要加上 i-ep- 后面跟上图标名，如 i-ep-Search 。

  2. 由于使用自动导入的方式，在使用动态组件循环渲染图标时，图标会不显示。这是由于 unplugin-vue-components的工作机制，无法从动态字符串推断组件。unplugin-icons 仅在构建时解析图标。

解决办法

显式使用图标，即


<script setup>
const items = [
{
  name: 'Alarm',
  icon: IconMdiAlarm,
},
{
  name: 'Account',
  icon: IconMdiAccount,
}
]
</script>

<template>
  <div v-for="i of items">
    <component :is="i.icon"/>
  </div>
</template>

关于坑二官方的说明：https://github.com/unplugin/unplugin-icons/issues/5