Vue.js中遍历渲染动态Heroicons图标组件失效问题

失效原因 #

你写的<item.icon class="h-5 w-5" />无法渲染，核心原因是Vue模板编译阶段会把小写开头的标签识别为原生HTML元素，不会将item.icon解析为指向组件的变量引用。你之前尝试的几种写法不生效的具体原因：

• <{{item.icon}} class="h-5 w-5" />：Vue模板不支持在标签名位置使用插值语法，会直接触发编译报错
• {{item.icon}}：文本插值会将组件对象转为字符串输出，无法生成组件实例
• <svg><path :d="item.icon"></path></svg>：Heroicons是封装完成的完整Vue组件，不是单独的path路径字符串，直接绑定无法拿到正确的路径值

推荐解决方案（全Vue版本通用） #

使用Vue内置的动态组件<component>标签，通过is属性绑定存储组件引用的变量即可正常渲染，修改后的模板代码如下：

<li v-for="item in navigation" class="relative px-6 py-3">
    <TemplateIcon class="h-5 w-5" />
    <!-- is属性绑定配置项中的图标组件引用 -->
    <component :is="item.icon" class="h-5 w-5" />
</li>

注意：如果使用Vue2版本，需要确保用到的图标组件已经在当前组件的components选项中完成注册，才能被动态组件识别渲染；Vue3 <script setup>语法下导入即可直接使用，无需额外注册。

配置校验 #

确保菜单项配置中的icon字段传入的是导入后的组件引用，不要传字符串，正确的配置示例：

// 先从Heroicons包中导入需要用到的图标
import { TemplateIcon, HomeIcon, CogIcon } from '@heroicons/vue/24/outline'

const navigation = [
  { name: 'Dashboard', icon: TemplateIcon, href: '#', current: true },
  { name: 'Home', icon: HomeIcon, href: '/home', current: false },
  { name: 'Settings', icon: CogIcon, href: '/settings', current: false }
]

改完之后两处图标即可正常渲染，传入的样式类也会正常生效。

内容的提问来源于stack exchange，提问作者Jakob Becker