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

【问题标题】：How to import icons from tailwind correctly into vue array如何将tailwind中的图标正确导入vue数组
【发布时间】：2021-11-08 17:56:13
【问题描述】：

我有一个对象数组，其中包含有关我需要在主页上添加的每张图片的信息（使用 v-for）。我使用 Tailwind 和它的英雄图标。但我不知道如何正确地将图标添加到数组中。这是 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;

【问题讨论】：

标签： vue.js vuejs3 tailwind-css vite

【解决方案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}
...
})

【讨论】：