如何从顺风正确导入图标到vue数组

Question

我有一个对象数组，其中包含关于我需要在主页上添加的每个图片的信息(使用v-for)。我使用的是Tailwind和Heroicons。但我不知道如何正确地向数组中添加图标。这是picturesData.ts

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;

Answer 1

在列表中只定义组件名称为字符串:

const picturesData = [
{
img: "image1",
title: "education",
src: "education.jpg",
subtitle: "Because we are all students",
icon: "AcademicCapIcon",
},
...

，然后在你的组件中导入和注册组件，并使用<component :is="icon"/>来渲染它们:

<div v-for="pic in pictureData" >
<component :is="pic.icon"/>
....
import {AcademicCapIcon, ClockIcon, MailIcon } from  '@heroicons/vue/outline'
export default defineComponent({
components:{AcademicCapIcon, ClockIcon, MailIcon}
...
})

在脚本设置语法中直接导入它们:

<script setup>
import {AcademicCapIcon, ClockIcon, MailIcon } from  '@heroicons/vue/outline'
</script>