映射和显示 Fontawesome 图标

Question

下面是我的 ContactTopForm 组件。

import { 
    faMapMarkerAlt,
    faPhoneAlt,
    faEnvelope,
    faFax
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React from 'react'

const ContactTopForm = () => {

    const contactInfoTop = [
    {
        icon: "faMapMarkerAlt",
        topic: "Our Location",
        content: ["SoHo 94 Broadway St New York, NY 1001"]
    },
    {
        icon: "faPhoneAlt",
        topic: "Phone Number",
        content: ["+254 700 000 000", "+254 700 000 000"]
    },
    {
        icon: "faEnvelope",
        topic: "Our Emails",
        content: ["email1@mail.com", "email2@mail.com", "email3@mail.com"]
    },
    {
        icon: "faFax",
        topic: "Our Location",
        content: ["SoHo 94 Broadway St New York, NY 1001"]
    }
    ]

    return (
        <div className="contact-form-top">
            <div className="contact-form-top-content">
                {contactInfoTop.map((element) => (
                    <div className="contact-form-item">
                        <FontAwesomeIcon
                            icon={element.icon}
                            className="contact-form-icon"/>
                        <h4 className="contact-form-item-h4">
                            {element.topic} 
                        </h4>
                        <div className="contact-form-item-div">
                            {element.content.map(item => (
                                <p className="contact-form-item-p">
                                    {item}
                                </p>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default ContactTopForm

我正在尝试映射 contactInfoTop 数组中的所有信息并呈现它们，同时尝试编写尽可能少的 jsx。

问题是除了如下所示的FontAwesomeIcons之外，所有数组信息都按计划显示 enter image description here

我怀疑是这里的问题

  <FontAwesomeIcon
      icon={element.icon}
      className="contact-form-icon"/>

应该怎么写？？

Answer 1

您可以做的是：

您可以传递从 @fortawesome/free-solid-svg-icons 导入的图标名称，而不是将图标写为字符串值。

因此您的代码应如下所示：

{
  icon: faFax, // icon name not string
  topic: "Our Location",
  content: ["SoHo 94 Broadway St New York, NY 1001"]
}

这是您的问题的有效解决方案：

import {
    faMapMarkerAlt,
    faPhoneAlt,
    faEnvelope,
    faFax
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React from 'react'

const ContactTopForm = () => {

    const contactInfoTop = [
        {
            icon: faMapMarkerAlt,
            topic: "Our Location",
            content: ["SoHo 94 Broadway St New York, NY 1001"]
        },
        {
            icon: faPhoneAlt,
            topic: "Phone Number",
            content: ["+254 700 000 000", "+254 700 000 000"]
        },
        {
            icon: faEnvelope,
            topic: "Our Emails",
            content: ["email1@mail.com", "email2@mail.com", "email3@mail.com"]
        },
        {
            icon: faFax,
            topic: "Our Location",
            content: ["SoHo 94 Broadway St New York, NY 1001"]
        }
    ]

    return (
        <div className="contact-form-top">
            <div className="contact-form-top-content">
                {contactInfoTop.map((element) => (
                    <div className="contact-form-item">
                        <FontAwesomeIcon
                            icon={element.icon}
                            className="contact-form-icon" />
                        <h4 className="contact-form-item-h4">
                            {element.topic}
                        </h4>
                        <div className="contact-form-item-div">
                            {element.content.map(item => (
                                <p className="contact-form-item-p">
                                    {item}
                                </p>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default ContactTopForm

您可以在此阅读更多内容 link。

映射和显示 Fontawesome 图标

Mapping and displaying Fontawesome Icons

javascript

arrays

reactjs

jsx

font-awesome