Как я могу передать массив импортированных объектов FontAwesomeIcon через карту, чтобы динамически генерировать FontAwesomeIcons на моей кнопке? - PullRequest
Новая
       49

Как я могу передать массив импортированных объектов FontAwesomeIcon через карту, чтобы динамически генерировать FontAwesomeIcons на моей кнопке?

0 голосов
/ 26 апреля 2020

Я хотел бы создать несколько значков на кнопке моих карточек. Мой подход состоял в том, чтобы получить список значков объектов с использованием переменной данных и создать компоненты FontAwesomeIcon. Мне нужно передать импортированный значок в поле «icon» FontAwesomeIcon. Мой подход был ниже, но он не генерировал нужную мне иконку. Что я сделал не так? 

import React from 'react';
import {
  Card,CardText, CardBody,
  CardTitle, CardSubtitle, Button
} from 'reactstrap';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faGithub} from '@fortawesome/free-brands-svg-icons'
import "./ProjectCard.css";

const ProjectCard = (props) => {
  var url = props.url
  var data = [{faGithub}]
  let icons = data.map(d =>(
    <FontAwesomeIcon icon = {d} size="2x" className = "icon"/>
  ))
  return (
    <div>
      <Card>
        {/* <CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap" /> */}
        <CardBody>
          <CardTitle>{props.title}</CardTitle>
          <CardSubtitle>{props.subtitle}</CardSubtitle>
          <CardText>{props.text}</CardText>
          <Button onClick = {() => window.open(url,"_blank")}>{icons}</Button>
        </CardBody>
      </Card>
    </div>
  );
};

export default ProjectCard;
...