如何将tailwind中的图标正确导入到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>

如何将tailwind中的图标正确导入到vue数组中

How to import icons from tailwind correctly into vue array

vue.js

tailwind-css

vuejs3

vite