Vue3基于Props动态导入unplugin-icons组件报错，求解决方案或替代库

现有动态组件的改进方法 #

你遇到的错误是因为/* @vite-ignore */跳过了Vite和unplugin-icons的路径解析，同时动态导入的组件使用方式有误。修改后的组件代码如下：

<script setup>
const props = defineProps({
  icon: { type: String, required: true }
})

// 保留静态前缀，让Vite识别并允许unplugin-icons处理路径
const iconModule = await import(`~icons/prime/${props.icon}`)
// 图标组件是模块的默认导出
const TheIcon = iconModule.default
</script>

<template>
  <component :is="TheIcon" />
</template>

关键修改点： #

• 移除/* @vite-ignore */：unplugin-icons需要解析~icons/前缀来生成对应的图标组件，跳过解析会导致浏览器无法识别这个别名路径。
• 保留动态导入的静态前缀：~icons/prime/是固定部分，Vite会基于这个前缀预扫描所有Prime图标，确保构建时能正确打包所需图标。
• 引用默认导出：动态导入返回的是模块对象，图标组件在default属性中，需要显式取出。

更简便的unplugin-icons使用方式 #

其实unplugin-icons本身支持自动注册全局组件，无需手动导入或写动态组件：

在Vite配置文件中开启相关选项：

// vite.config.js
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Components({
      resolvers: [
        IconsResolver({
          prefix: 'icon',
          // 指定使用Prime图标集
          enabledCollections: ['prime']
        })
      ]
    }),
    Icons({
      autoInstall: true
    })
  ]
}

之后在模板中直接使用带前缀的组件名即可：

<template>
  <icon-prime-copy />
</template>

替代图标库推荐 #

如果unplugin-icons的方案仍不符合需求，可以试试这些：

• PrimeIcons：Prime系列官方图标库，直接通过CSS引入，使用时只需添加类名：<i class="pi pi-copy"></i>，无需组件化，适合快速使用。
• Heroicons Vue：提供轻量现代的图标，支持Vue组件按需导入，也可通过动态组件方式批量使用，图标风格简洁统一。
• Tabler Icons Vue：拥有上千个开源图标，支持Vue 3，可按需导入或动态加载，文档完善，自定义性强。

内容的提问来源于stack exchange，提问作者Matius Nugroho Aryanto