如何正确将Tailwind的Heroicons图标导入Vue项目的数组中

问题原因 #

你当前的错误在于直接将组件的JSX/模板标签写在了TS数组的字段中，TS文件无法直接解析这种标签语法，也不需要通过这种方式传递图标组件。

第一步：修改picturesData.ts文件 #

icon字段直接存你导入的组件引用即可，不需要加尖括号包裹：

import { AcademicCapIcon, ClockIcon, MailIcon } from '@heroicons/vue/outline'
const picturesData = [
    {
      img: "image1",
      title: "education",
      src: "education.jpg",
      subtitle: "Because we are all students",
      icon: AcademicCapIcon,
    },
    {
      img: "image2",
      title: "recreational",
      src: "recreation.jpg",
      subtitle: "Who doesn't like having fun?",
      icon: ClockIcon      
    },
    {
      img: "image3",
      title: "social",
      src: "social.jpg",
      subtitle: "Need some friends?",
      icon: MailIcon      
    },
]
export default picturesData

第二步：Vue模板中渲染图标 #

在使用v-for渲染列表的位置，用Vue内置的<component>动态组件绑定icon字段即可，同时可以直接传Tailwind类名控制图标的大小、颜色等样式：

<template>
  <div class="grid grid-cols-3 gap-4">
    <div 
      v-for="item in picturesData" 
      :key="item.img"
      class="border rounded p-4"
    >
      <!-- 渲染图标 -->
      <component :is="item.icon" class="w-8 h-8 text-indigo-600 mb-2" />
      <img :src="item.src" :alt="item.title" class="w-full h-48 object-cover mb-2">
      <h2 class="text-lg font-bold mb-1">{{ item.title }}</h2>
      <p class="text-gray-600">{{ item.subtitle }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import picturesData from './picturesData'
</script>

可选优化：加TS类型约束 #

如果需要更严谨的类型校验，可以给数组项加类型标注：

import type { Component } from 'vue'
import { AcademicCapIcon, ClockIcon, MailIcon } from '@heroicons/vue/outline'

interface PictureItem {
  img: string
  title: string
  src: string
  subtitle: string
  icon: Component
}

const picturesData: PictureItem[] = [
  // 数组内容同上
]

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