映射和显示 Fontawesome 图标

Posted 2023-02-21

【中文标题】映射和显示 Fontawesome 图标

【英文标题】：Mapping and displaying Fontawesome Icons

【发布时间】：2021-12-22 22:07:50

【问题描述】：

下面是我的 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: ["[phone]", "[phone]"]
    ,
    
        icon: "faEnvelope",
        topic: "Our Emails",
        content: ["[e-mail]", "[e-mail]", "[e-mail]"]
    ,
    
        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"/>

应该怎么写？？

【参考方案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: ["[phone]", "[phone]"]
        ,
        
            icon: faEnvelope,
            topic: "Our Emails",
            content: ["[e-mail]", "[e-mail]", "[e-mail]"]
        ,
        
            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 中阅读更多内容。